Quy tắc CSS @font-face
Ví dụ
Chỉ định phông chữ có tên "myFirstFont" và chỉ định URL nơi có thể tìm thấy phông chữ đó:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Với quy tắc @font-face
, các nhà thiết kế web không cần phải sử dụng một trong những phông chữ "an toàn cho web" nữa.
Trong quy tắc @font-face
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 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:
div
{
font-family: myFirstFont;
}
Hỗ trợ trình duyệt
Quy tắc @font-face
đượ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 thành "có thể cài đặt".
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" |
Thêm ví dụ
Ví dụ
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:
@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ữ.
Trang liên quan
Hướng dẫn CSS: Phông chữ Web CSS