Quy tắc CSS @ font-face
Thí dụ
Chỉ định một phông chữ có tên "myFirstFont" và chỉ định URL nơi nó có thể được tìm thấy:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Với @font-facequy tắc này, các nhà thiết kế web không phải sử dụng một trong những phông chữ "web an toàn" nữa.
Trong @font-facequy tắc, trước tiên bạn phải xác định tên cho phông chữ (ví dụ: myFirstFont), sau đó trỏ đến tệp phông chữ.
Để sử dụng phông chữ cho một phần tử HTML, hãy tham khảo tên của phông chữ (myFirstFont) thông qua thuộc tính font-family:
div
{
font-family: myFirstFont;
}
Hỗ trợ trình duyệt
Quy @font-facetắc được hỗ trợ trong Edge, Chrome, Firefox, Safari và Opera.
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 |
* Định dạng phông chữ chỉ hoạt động khi được đặt là "có thể cài đặt được".
Cú pháp
@font-face
{
font-properties
}
| Font descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines the name of the font. |
| src | URL | Required. Defines the URL(s) where the font should be downloaded from |
| 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 value is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default value is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default value is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF" |
Các ví dụ khác
Thí dụ
Bạn phải thêm một quy tắc @ font-face khác có chứa bộ mô tả cho văn bản in đậm:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
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ẽ hiển thị đậ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ữ.
Các trang liên quan
Hướng dẫn CSS: Phông chữ Web CSS