Khóa học khuyến nghị:

Quy tắc @font-face của CSS

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

Bằng cách sử dụng quy tắc @font-face, 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 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):
  font-family: myFirstFont;
}

div {

Xem thêm:Font Web trong CSS

Mô hình

Hướng dẫn CSS:

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

Thử ngay lập tức

src: url(sansation_light.woff);

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

@font-face {
  Ngữ pháp CSS
}
font-properties 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 byte Unicode được hỗ trợ bởi font. Giá trị mặc định là "U+0-10FFFF".

Nhiều mô hình hơn

Mô hình

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

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

Thử ngay lập tức

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ần hiển thị đậm với họ font "myFirstFont", 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).