Quy tắc @font-face CSS

  • Trang trước
  • Trang tiếp theo

Định nghĩa và cách sử dụng

Bằng cách sử dụng quy tắc @font-face, các nhà thiết kế web không cần phải sử dụng bất kỳ font "an toàn" nào.

Trong quy tắc @font-face, bạn phải định nghĩa tên font đầu tiên (ví dụ: myFirstFont), sau đó chỉ định tệp font.

Lưu ý:URL của font sử dụng chữ thường. Chữ in hoa có thể gây ra kết quả bất ngờ trong IE!

Nếu bạn muốn sử dụng font cho các phần tử HTML, hãy tham chiếu tên font qua thuộc tính font-family (myFirstFont):

div {
  font-family: myFirstFont;
}

Xin xem thêm:

Hướng dẫn CSS:Web font trong CSS

Mô hình

Định nghĩa một font có tên là "myFirstFont" và quy định URL có thể tìm thấy nó:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

Thử trực tiếp

Bạn có thể tìm thấy nhiều ví dụ TIY hơn ở dưới cùng của trang.

Ngữ pháp CSS

@font-face {
  font-properties
}
Font descriptor Giá trị Mô tả
font-family name Bắt buộc. Định nghĩa tên font.
src URL Bắt buộc. Định nghĩa URL tải về font.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Tùy chọn. Định nghĩa cách kéo dãn font. Giá trị mặc định là "normal".
font-style
  • normal
  • italic
  • oblique
 Tùy chọn. Định nghĩa phong cách font. Giá trị mặc định là "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Tùy chọn. Định nghĩa độ mỏng của font. Giá trị mặc định là "normal".
unicode-range unicode-range Tùy chọn. Định nghĩa khoảng phổ biến Unicode được hỗ trợ bởi font. Giá trị mặc định là "U+0-10FFFF".

Các mô hình khác

Mô hình

Bạn phải thêm quy tắc @font-face khác, bao gồm mô tả của văn bản đậm:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

Thử trực tiếp

Tệp "sansation_bold.woff" là một tệp font khác chứa các ký tự đậm của font Sansation.

Mỗi khi đoạn văn bản có họ "myFirstFont" cần hiển thị ở đậm, trình duyệt sẽ sử dụng nó.

Như vậy, bạn có thể thiết lập nhiều quy tắc @font-face cho cùng một font.

Hỗ trợ trình duyệt

Internet Explorer, Firefox, Opera, Chrome và Safari đều hỗ trợ quy tắc @font-face.

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn định dạng font.

Định dạng font
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 Không hỗ trợ Không hỗ trợ Không hỗ trợ 3.2 Không hỗ trợ
EOT 6.0 Không hỗ trợ Không hỗ trợ Không hỗ trợ Không hỗ trợ

* Edge và IE: Định dạng font chỉ có hiệu lực khi được thiết lập thành "installable".

* Firefox: Mặc định là tắt, nhưng có thể bật (cần thiết phải thiết lập flag thành "true" mới có thể sử dụng WOFF2).

  • Trang trước
  • Trang tiếp theo