Tôi muốn sử dụng một phông chữ duy nhất có tên "Algeria" trên toàn bộ trang web của mình. Vì vậy, tôi cần thay đổi tất cả các thẻ HTML và tôi không muốn viết mã khác cho các thẻ khác nhau như:
button{font-family:Algerian;}
div{font-family:Algerian;}
Phương pháp được viết dưới đây cũng rất không được khuyến khích:
div,button,span,strong{font-family:Algerian;}Câu trả lời:
Đặt font-familykhai báo vào một bodybộ chọn:
body {
font-family: Algerian;
}
Sau đó, tất cả các phần tử trên trang của bạn sẽ kế thừa họ phông chữ này (tất nhiên là trừ khi bạn ghi đè nó sau này).
font-familytừ cha của nó khi không có biểu định kiểu nào đặt họ phông chữ cho phần tử. Style sheets trình duyệt thường đặt họ phông chữ ít nhất là cho input, textarea, code, tt, và precác yếu tố.
*{font-family:Algerian;}giải pháp tốt hơn bên dưới Áp dụng một phông chữ duy nhất cho toàn bộ trang web bằng CSS
Bộ chọn phổ quát *đề cập đến tất cả các phần tử, css này sẽ làm điều đó cho bạn:
*{
font-family:Algerian;
}Nhưng thật không may 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ẽ chỉ phá hủy các biểu tượng và chúng sẽ không hiển thị chế độ xem cần thiết.
Để tránh điều này, bạn có thể sử dụng :notbộ chọn, một mẫu biểu tượng phông chữ tuyệt vời <i class="fa fa-bluetooth"></i>, vì vậy bạn chỉ cần sử dụng:
*:not(i){
font-family:Algerian;
}điều này sẽ áp dụng họ này cho tất cả các phần tử trong tài liệu ngoại trừ các phần 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;
}điều này sẽ áp dụng họ này cho tất cả các phần tử trong tài liệu ngoại trừ các phần tử có lớp "fa" đề cập đến lớp mặc định fontawesome, bạn cũng có thể nhắm mục tiêu nhiều hơn một lớp như thế này:
*:not(i):not(.fa):not(.YourClassName){
font-family:Algerian;
}* { font-family: Algerian; }Bộ chọn phổ quát *đề cập đến bất kỳ phần tử nào.
Vì một phông chữ khác có thể đã được trình duyệt xác định cho các phần tử biểu mẫu, nên đây là 2 cách để sử dụng phông chữ này ở mọi nơi:
body, input, textarea {
font-family: Algerian;
}
body {
font-family: Algerian !important;
}Sẽ vẫn có phông chữ monospace trên các phần tử như pre / code, kbd, v.v. nhưng, trong trường hợp bạn sử dụng các phần tử này, tốt hơn bạn nên sử dụng phông chữ monospace ở đó.
Lưu ý quan trọng: nếu rất ít người đã cài đặt phông chữ này 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 nên phông 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 @ font-face nếu phông chữ của bạn được sử dụng miễn phí làm phông chữ có thể tải xuống hoặc thêm (các) dự phòng: một thứ hai, một thứ ba, v.v. và cuối cùng là một họ mặc định (sans-serif, thảo mộc (*), monospace hoặc serif). Đầu tiên trong 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.
(*) chữ thảo mặc định trên Windows là Comic Sans. Trừ khi bạn muốn troll người dùng Windows, đừng làm như vậy :) Phông chữ này thật khủng khiếp, ngoại trừ những ngày sinh nhật của con bạn được chào đón.
Ok vì vậy tôi đã gặp sự cố này trong đó 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 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 mình nên tôi đặt nó ở đầu tài liệu css. trên tất cả các thẻ Div (không phải là vấn đề quan trọng, chỉ cần biết rằng bất kỳ phông chữ riêng lẻ nào bạn chỉ định cho bài đăng tập lệnh của mình 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 sau đó tôi muốn tất cả các thẻ H1 của mình là một cái gì đó khác, hãy nói sans sarif, tôi sẽ làm điều gì đó như
h1{
font-family: Sans-sarif;
}Từ trường hợp đó, chỉ các thẻ H1 của tôi sẽ là phông chữ sans-sarif và phần còn lại của trang của tôi sẽ là phông chữ Ubuntu-LI
*{font-family:Algerian;}html này đã làm việc cho tôi. Đã thêm vào cài đặt canvas trong wordpress.
Trông thật tuyệt - cảm ơn!