Cách sử dụng phông chữ web

Sep 14, 2025

Cách

Sau đây là một đoạn trích được lấy từ Sổ tay WebFont của Bram Stein. Mua nó ở đây .

Phông chữ web được xác định trong CSS thông qua @mặt chữ qui định. Nếu bạn là nhà phát triển web, rất có thể bạn đã viết, sao chép và dán, hoặc ít nhất nhìn thấy một @mặt chữ qui định.

Tuy nhiên, vì sự hoàn thiện, hãy nhanh chóng chạy qua một ví dụ cơ bản:

 @ Font-Face {
  Font-Family: Elena;
  src: url (elena-thường xuyên.woff);
}

Điều này tạo ra một gia đình phông chữ web mới có thể được tham chiếu thông qua Font-Family. hoặc là nét chữ Tài sản Shorthand. Nhưng một cái gì đó còn thiếu ở đây. Khi tham chiếu một phông chữ web trong ngăn xếp phông chữ, luôn đảm bảo bao gồm ít nhất một phông chữ dự phòng trong trường hợp phông chữ web không tải.

Ở đây, nếu Elena không tải, trình duyệt sẽ quay trở lại chung chung serif. Gia đình phông chữ:

 P {
  Font-Family: Elena, Serif;
}

Có nhiều hơn nữa để phông chữ dự phòng, nhưng bây giờ, hãy giữ cho ngăn xếp phông chữ của chúng ta đơn giản bằng cách chỉ bao gồm cả chung chung chung serif. và sans serif gia đình phông chữ.

Gia đình phông chữ

Tạo một gia đình phông chữ với nhiều phong cách được thực hiện bằng cách tạo ra một @mặt chữ quy tắc cho từng phong cách và sử dụng giống nhau Font-Family. Tên. Những điều sau đây @mặt chữ Các quy tắc tạo ra một gia đình có phong cách bình thường và đậm:

 @ Font-Face {
     Font-Family: Elena;
     src: url (elena-thường xuyên.woff);
     Trọng lượng phông chữ: Bình thường;
Không thể
   @mặt chữ {
     Font-Family: Elena;
     SRC: URL (Elena-Bold.Woff);
     Trọng lượng phông chữ: Bold;
}

Bạn có thể sử dụng gia đình phông chữ này trong CSS của mình bằng cách tham khảo tên gia đình và trọng lượng trong bộ chọn của bạn. Điều này áp dụng phong cách thông thường cho các đoạn văn và phong cách đậm để mạnh Đoạn văn:

 P {
  Font-Family: Elena, Serif;
Không thể

p mạnh {
  Trọng lượng phông chữ: Bold;
}

ngoài ra Phông chữ Cái gì @mặt chữ Cũng chấp nhận phông chữ-style. và phông chữ kéo dài. mô tả tài sản, xác định các phong cách như in nghiêng và cô đọng. Tất cả ba mô tả tài sản có thể được sử dụng để tạo một gia đình phông chữ duy nhất với nhiều kiểu dáng. Về mặt lý thuyết, điều này cho phép bạn tạo ra một gia đình chứa 243 kiểu cá nhân (chín Phông chữ Giá trị × ba. phông chữ-style. Giá trị × chín. phông chữ kéo dài. giá trị).

Tuy nhiên, trong thực tế, bạn sẽ giới hạn 27 giá trị, vì một số trình duyệt không hỗ trợ phông chữ kéo dài. . Hãy xem bảng bên dưới để xem các trình duyệt nào bạn có thể sử dụng và nhìn đây để biết thông tin chi tiết hơn.

Click the icon in the top right to enlarge the image — Nhấp vào biểu tượng ở trên cùng bên phải để phóng to hình ảnh

Với sự may mắn, các trình duyệt còn lại sẽ thực hiện phông chữ kéo dài. Sắp có tài sản, và bạn sẽ có thể sử dụng tất cả 243 phân loại phông chữ.

Định dạng phông chữ

Các SRC. Mô tả nói với một trình duyệt nơi để có một tập tin phông chữ. Các ví dụ trước đã sử dụng một định dạng phông chữ duy nhất, nhưng bạn sẽ thường thấy các URL sang nhiều định dạng phông chữ kết hợp với các gợi ý định dạng, được nối thêm sau URL bằng cách sử dụng Định dạng ("Giá trị") cú pháp.

Gợi ý định dạng Giới thiệu với trình duyệt Định dạng của tệp phông chữ tại một URL nhất định là gì.

 @ Font-Face {
  Font-Family: Elena;
  Định dạng SRC: URL (elena-thông thường.woff2) ("wff2"),
       định dạng url (elena-thường xuyên.woff) ("Woff");
}

Nếu bạn liệt kê nhiều định dạng, trình duyệt hiện đại sẽ chọn định dạng đầu tiên mà chúng hỗ trợ dựa trên gợi ý định dạng. Do đó, điều quan trọng là liệt kê các định dạng phông chữ web theo thứ tự nén tốt nhất đến ít nhất.

Mặc dù Gợi ý định dạng là tùy chọn, hãy luôn bao gồm chúng - chúng cho phép trình duyệt biết về định dạng mà không cần tải xuống phông chữ. Ví dụ: nếu trình duyệt không hỗ trợ wff2, nhưng có hỗ trợ woff, nó có thể bỏ qua tệp phông chữ wff2 dựa trên gợi ý định dạng.

Các trình duyệt hỗ trợ một số định dạng phông chữ web: OpenType (TrueType), EOT, WOFF và WOFF2. Một số trình duyệt cũng hỗ trợ phông chữ SVG, nhưng chúng không được sử dụng và không còn được sử dụng (và không nên nhầm lẫn với Định dạng OpenType-SVG mới ).

Eot, woff và wff2 là định dạng kỹ thuật không phải là phông chữ. Chúng được nén các tệp OpenType với mức độ nén khác nhau. Woff2 cung cấp sự nén tốt nhất, tiếp theo là WOFF và EOT.

Trong nghiên cứu bảo hiểm cho tất cả các trình duyệt, bạn có thể đã bắt gặp một thứ gọi là Bulletproof. @mặt chữ Cú pháp bằng phông chữ.

Cú pháp chống đạn sử dụng EOT, WOFF2, WOFF, OpenType thô và các tệp phông chữ SVG để bảo hiểm trình duyệt tối đa:

 @ Font-Face {
  Font-Family: Elena;
  src: url (elena.eot? #iefix) ("nhúng-openType"),
       định dạng url (elena.wff2) ("wff2"),
       định dạng url (elena.woff) ("wff"),
       Định dạng URL (elena.otf) ("OpenType"),
       định dạng url (elena.svg # elena) ("svg");
}

Dòng URL đầu tiên có thể trông hơi kỳ lạ với bạn. Các phiên bản của Internet Explorer 8 trở xuống không hỗ trợ cú pháp cho nhiều định dạng phông chữ và xử lý toàn bộ giá trị của SRC. tài sản như url.

Các cú pháp chống đạn Tricks Internet Explorer 8 trở xuống để nghĩ rằng các URL còn lại là một phần của định danh đoạn của URL đầu tiên. Do định danh mảnh bị bỏ qua khi tải tệp, Internet Explorer 8 trở xuống chỉ cần sử dụng URL đầu tiên.

Các trình duyệt khác với Internet Explorer sẽ bỏ qua dòng vì chúng không hỗ trợ EOT.

Phần còn lại của các mục là những gì bạn mong đợi: các định dạng phông chữ được liệt kê theo thứ tự ưu tiên.

Nhưng cú pháp chống đạn vẫn có liên quan? Không. Trong thực tế, tôi nghĩ nó có hại. Phông chữ SVG bị phản đối và chỉ được các trình duyệt hỗ trợ không còn được sử dụng.

Hầu hết các trang web hỗ trợ Internet Explorer 9 trở lên, nhưng cú pháp liệt kê EOT là định dạng phông chữ ưa thích đầu tiên. Mặc dù Internet Explorer 9 trở lên hỗ trợ WOFF, các phiên bản đó sẽ vẫn tải xuống tệp EOT, đơn giản là vì nó được liệt kê đầu tiên.

Bởi vì hầu hết các trang web không còn hỗ trợ các trình duyệt cũ, tôi khuyên bạn nên sử dụng một cú pháp đơn giản hóa. Cú pháp đơn giản hóa này bao gồm tất cả các trình duyệt hiện đại, cũng như những trình duyệt khá nhiều vẫn đang sử dụng tích cực, chẳng hạn như Android 4.4 trở về trước:

 @ Font-Face {
  Font-Family: Elena;
  Định dạng SRC: url (elena.wff2) ("wff2"),
       định dạng url (elena.woff) ("wff"),
       định dạng url (elena.otf) ("opentepe");
}

Mặc dù các phiên bản Android cũ hơn vẫn được sử dụng, phụ thuộc trên toàn thế giới vào các trình duyệt này đang giảm dần. Chẳng mấy chốc, bạn có thể sẽ có thể bỏ định dạng OpenType thô và đơn giản hóa cú pháp hơn nữa:

 @ Font-Face {
  Font-Family: Elena;
  Định dạng SRC: url (elena.wff2) ("wff2"),
       định dạng url (elena.woff) ("woff");
}

Trong trường hợp này, ai đó đang chạy trình duyệt cũ hơn sẽ chỉ cần xem phông chữ dự phòng của bạn thay vì phông chữ Web. Tốt rồi; Họ vẫn có thể đọc nội dung trong phông chữ dự phòng.

Có một giá trị có thể có khác cho SRC. mô tả. Các địa phương Hàm lấy tên của một gia đình phông chữ địa phương. Nếu phông chữ xảy ra được cài đặt trên hệ thống, thay vào đó, trình duyệt sẽ sử dụng nó, do đó tránh tải xuống thêm.

 @ Font-Face {
  Font-Family: Elena;
  SRC: Địa phương ("Elena"),
       định dạng url (elena-thông thường.wff2) ("wff2"),
       định dạng url (elena-thường xuyên.woff) ("Woff");
}

Mặc dù điều này có vẻ như là một sự tối ưu hóa tuyệt vời, nhưng không có gì đảm bảo rằng phông chữ địa phương khớp với phông chữ web của bạn.

Bạn có thể nhận được một phiên bản khác nhau của phông chữ, một phông chữ với hỗ trợ ngôn ngữ khác nhau hoặc thậm chí là một phông chữ hoàn toàn khác nhau. Vì lý do đó, tôi thường khuyên bạn không nên sử dụng địa phương. chức năng trừ khi bạn thấy những nhược điểm này được chấp nhận.

Đây là một đoạn trích từ Bram Stein's Sổ tay WebFont , từ một cuốn sách ngoài. Trong đó, ông khám phá những gì cần xem xét khi chọn phông chữ web, cách sử dụng chúng một cách hiệu quả và cách tối ưu hóa hiệu suất.

Những bài viết liên quan:

Blockchain là cái quái gì vậy?
30 tiện ích mở rộng Chrome cho các nhà thiết kế web và bộ phát triển
20 phông chữ web Google miễn phí tuyệt vời

Cách sử dụng phông chữ web

Gia đình phông chữ

Định dạng phông chữ

Cách - Các bài báo phổ biến nhất

Nhận thêm từ Artrage 6: Mẹo hàng đầu để tăng cường quy trình làm việc của bạn

Học cách mô hình hóa một người 3d trong Zbrush và Maya

Tạo hình động UI Slick

Lấy đầu xung quanh phản ứng với năm yếu tố này

Cách minh họa cho một sự kiện

Cách điêu khắc trong rạp chiếu phim 4D

Cách tạo Manga với Twist West West

Cách kết hợp các bộ màu nước của họa sĩ

Thể loại