Tôi muốn sử dụng một phông chữ có tên là "Algeria" trên toàn bộ trang web của mình. Vì vậy, tôi cần phải thay đổi tất cả các thẻ HTML và tôi không muốn viết mã khác nhau cho thẻ khác nhau như:Áp dụng một phông chữ duy nhất cho toàn bộ trang web với CSS
button{font-family:Algerian;}
div{font-family:Algerian;}
Phương pháp viết dưới đây cũng được đánh giá cao nản:
div,button,span,strong{font-family:Algerian;}
Đặt font-family khai báo vào bộ chọn body:
body {
font-family: Algerian;
}
Tất cả các yếu tố trên trang của bạn sẽ kế thừa họ phông chữ này (trừ khi, tất nhiên bạn ghi đè trễ rồi).
Một phần tử kế thừa 'font-family' từ cha mẹ của nó chỉ khi * style style * không đặt họ phông chữ cho phần tử. Các bảng kiểu trình duyệt thường đặt họ phông chữ ít nhất là cho các phần tử 'input',' textarea', 'code',' tt' và 'pre'. –
Bạn nói đúng. Tôi đã làm việc với các thiết lập lại CSS quá lâu nên tôi quên loại điều này :) –
* { font-family: Algerian; }
Bộ chọn phổ quát * là bất kỳ yếu tố nào.
Là một phông chữ khác nhau có khả năng được đã được xác định bởi trình duyệt cho các yếu tố hình thức, đây là 2 cách để sử dụng font này ở khắp mọi nơi:
body, input, textarea {
font-family: Algerian;
}
body {
font-family: Algerian !important;
}
Vẫn sẽ có một phông chữ monospace trên các yếu tố như trước/code, kbd, vv nhưng, trong trường hợp bạn sử dụng các phần tử này, bạn nên sử dụng một phông chữ đơn điệu ở đó.
Lưu ý quan trọng: nếu rất ít người có phông chữ này được cài đặt trên hệ điều hành của họ, thì phông chữ thứ hai trong danh sách sẽ được sử dụng. Ở đây bạn đã xác định không có phông chữ thứ hai để font chữ serif mặc định sẽ được sử dụng, và nó sẽ là Times, Times New Roman ngoại trừ có thể trên Linux.
Hai tùy chọn ở đó: sử dụng @ phông chữ nếu phông chữ của bạn được sử dụng miễn phí dưới dạng phông chữ có thể tải xuống hoặc thêm dự phòng: giây, thứ ba, v.v ... và cuối cùng là gia đình mặc định (sans-serif, cursive (*) , monospace hoặc serif). Đầu tiên của danh sách tồn tại trên hệ điều hành của người dùng sẽ được sử dụng.
(*) mặc định chữ thảo trên Windows là Comic Sans. Ngoại trừ nếu bạn muốn troll người dùng Windows, không làm điều đó :) Phông chữ này là khủng khiếp ngoại trừ sinh nhật con của bạn, nơi nó được chào đón.
Đảm bảo rằng thiết bị di động sẽ không thay đổi font với font chữ mặc định của họ bằng cách sử dụng quan trọng cùng với bộ chọn phổ biến *:
* { font-family: Algerian !important;}
*{font-family:Algerian;}
DO như thế này
Điều thú vị là điều này không hiệu quả khi sử dụng thiết lập CSS của Eric Meyer – ianbeks
Điều đó không áp dụng họ phông chữ cho mọi phần tử đơn lẻ? Điều này có vẻ như nó sẽ áp dụng nó cho các yếu tố không cần thiết (như ) và không hiệu quả. Tôi chắc chắn có thể sai, nhưng tôi đã đọc để sử dụng thận trọng với việc áp dụng một phong cách cho tất cả mọi thứ. –
Vì quy tắc chung không thể ghi đè, bạn sẽ không thể sử dụng phông chữ thứ hai trên trang web của mình. –
*{font-family:Algerian;}
html này đã làm cho tôi. Đã thêm vào cài đặt canvas trong wordpress.
Có vẻ tuyệt vời - cảm ơn!
Ok vì vậy, tôi đã gặp phải vấn đề này, nơi tôi đã thử một số tùy chọn khác nhau.
Phông chữ tôi đang sử dụng là Ubuntu-LI, tôi đã tạo một thư mục phông chữ trong thư mục làm việc của mình. dưới các phông chữ thư mục
tôi đã có thể áp dụng nó ... cuối cùng ở đây là mã làm việc của tôi
Tôi muốn điều này để áp dụng cho toàn bộ trang web của tôi vì vậy tôi đặt nó ở phía trên cùng của doc css.trên tất cả các thẻ Div (không phải là vấn đề, chỉ biết rằng bất kỳ phông chữ riêng bạn gán gửi kịch bản của bạn sẽ được ưu tiên)
@font-face{
font-family: "Ubuntu-LI";
src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}
*{
font-family:"Ubuntu-LI";
}
Nếu tôi sau đó muốn tất cả các thẻ H1 của tôi để được cái gì khác cho phép nói sans sarif tôi sẽ làm một cái gì đó giống như
h1{
font-family: Sans-sarif;
}
Từ trường hợp này chỉ có thẻ H1 của tôi sẽ là sans-sarif phông chữ và phần còn lại của trang web của tôi sẽ là font Ubuntu-LI
Hãy đặt này vào đầu của (các) Trang của bạn nếu "nội dung" cần sử dụng 1 và cùng một phông chữ:
<style type="text/css">
body {font-family:FONT-NAME ;
}
</style>
Tất cả mọi thứ giữa các thẻ <body> và </body> sẽ có cùng một phông chữ
Bộ chọn chung * đề cập đến tất cả các yếu tố, css này sẽ làm điều đó cho bạn:
*{
font-family:Algerian;
}
Nhưng tiếc nếu bạn đang sử dụng các biểu tượng FontAwesome hoặc bất kỳ Biểu tượng nào yêu cầu họ phông chữ của riêng chúng, điều này sẽ đơn giản phá hủy các biểu tượng và chúng sẽ không hiển thị chế độ xem được yêu cầu.
Để tránh điều này, bạn có thể sử dụng bộ chọn :not, một mẫu của biểu tượng fontawesome là <i class="fa fa-bluetooth"></i>, vì vậy chỉ đơn giản là bạn có thể sử dụng:
*:not(i){
font-family:Algerian;
}
này sẽ được áp dụng trong gia đình này cho tất cả các yếu tố trong tài liệu ngoại trừ các yếu tố có tên thẻ <i>, bạn cũng có thể làm điều đó cho các lớp:
*:not(.fa){
font-family:Algerian;
}
này sẽ được áp dụng trong gia đình này cho tất cả các yếu tố trong tài liệu ngoại trừ các yếu tố với lớp "fa" trong đó đề cập đến fontawesome defau lt class, bạn cũng có thể nhắm mục tiêu đến nhiều lớp học như thế này:
*:not(i):not(.fa):not(.YourClassName){
font-family:Algerian;
}
Câu trả lời này cung cấp nhiều chi tiết cần thiết theo cách sử dụng kiểu dáng hiện tại trong trang web do việc sử dụng biểu tượng từ bootstrap (glyphicons) và phông chữ tuyệt vời – Lakshman
xin lưu ý: (không chọn) là CSS3 không tương thích với tất cả các trình duyệt. IE 9+ chúng ta phải chờ ít nhất 10 năm để tất cả mọi người trên khắp thế giới rời khỏi IE-9 mãi mãi: D: '( –
họ phông chữ là giá trị được kế thừa, vậy tại sao không chỉ xác định nó trên cơ thể? –
Bạn có thể chọn câu trả lời từ Jukka K. Korpela. Nó sớm hơn câu trả lời được chọn hiện tại, trong khoảng một tháng và có nội dung gần như giống nhau. – okm
có thể trùng lặp của [Cách Áp dụng phông chữ chung cho toàn bộ tài liệu HTML] (http://stackoverflow.com/questions/7025756/how-to-apply-global-font-to-whole-html-document) – davidcondrey