Phông chữ web CSS
Quy tắc CSS @font-face
Phông chữ web cho phép các nhà thiết kế web sử dụng các phông chữ không được cài đặt trên máy tính của người dùng.
Khi bạn đã tìm thấy/mua phông chữ mình muốn sử dụng, chỉ cần đưa tệp phông chữ vào máy chủ web của bạn và nó sẽ tự động được tải xuống người dùng khi cần.
Phông chữ "của riêng" bạn được xác định trong quy tắc CSS @font-face .
Định dạng phông chữ khác nhau
Phông chữ TrueType (TTF)
TrueType là một chuẩn phông chữ được phát triển vào cuối những năm 1980 bởi Apple và Microsoft. TrueType là định dạng phông chữ phổ biến nhất cho cả hệ điều hành Mac OS và Microsoft Windows.
Phông chữ OpenType (OTF)
OpenType là một định dạng dành cho phông chữ máy tính có thể mở rộng. Nó được xây dựng trên TrueType và là nhãn hiệu đã đăng ký của Microsoft. Phông chữ OpenType được sử dụng phổ biến ngày nay trên các nền tảng máy tính lớn.
Định dạng phông chữ mở trên web (WOFF)
WOFF là định dạng phông chữ để sử dụng trong các trang web. Nó được phát triển vào năm 2009 và hiện là Khuyến nghị của W3C. WOFF về cơ bản là OpenType hoặc TrueType với tính năng nén và siêu dữ liệu bổ sung. Mục tiêu là hỗ trợ phân phối phông chữ từ máy chủ đến máy khách qua mạng có hạn chế về băng thông.
Định dạng phông chữ mở trên web (WOFF 2.0)
Phông chữ TrueType/OpenType cung cấp khả năng nén tốt hơn WOFF 1.0.
Phông chữ/Hình dạng SVG
Phông chữ SVG cho phép sử dụng SVG làm glyph khi hiển thị văn bản. Đặc tả SVG 1.1 xác định mô-đun phông chữ cho phép tạo phông chữ trong tài liệu SVG. Bạn cũng có thể áp dụng CSS cho tài liệu SVG và quy tắc @font-face có thể được áp dụng cho văn bản trong tài liệu SVG.
Phông chữ OpenType nhúng (EOT)
Phông chữ EOT là một dạng phông chữ OpenType nhỏ gọn được Microsoft thiết kế để sử dụng làm phông chữ nhúng trên các trang web.
Hỗ trợ trình duyệt cho các định dạng phông chữ
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ định dạng phông chữ.
| Font format | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*IE: Định dạng phông chữ chỉ hoạt động khi được đặt thành "có thể cài đặt".
Sử dụng phông chữ bạn muốn
Trong quy tắc @font-face ; trước tiên hãy xác định tên cho phông chữ (ví dụ myFirstFont) rồi trỏ đến tệp phông chữ.
Mẹo: Luôn sử dụng chữ thường cho URL phông chữ. Chữ in hoa có thể cho kết quả không mong muốn trong IE.
Để sử dụng phông chữ cho thành phần HTML, hãy tham khảo tên phông chữ (myFirstFont) thông qua thuộc tính font-family :
Ví dụ
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Hãy tự mình thử »Sử dụng văn bản in đậm
Bạn phải thêm một quy tắc @font-face khác có chứa phần mô tả cho văn bản in đậm:
Ví dụ
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Hãy tự mình thử »Tệp "sansation_bold.woff" là một tệp phông chữ khác chứa các ký tự in đậm cho phông chữ Sansation.
Các trình duyệt sẽ sử dụng điều này bất cứ khi nào một đoạn văn bản có họ phông chữ "myFirstFont" sẽ được in đậm.
Bằng cách này, bạn có thể có nhiều quy tắc @font-face cho cùng một phông chữ.
Bộ mô tả phông chữ CSS
Bảng sau liệt kê tất cả các bộ mô tả phông chữ có thể được xác định bên trong quy tắc @font-face :
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |
