1. Web
  2. CSS
  3. Guides
  4. Fonts

CSS fonts

Module CSS fonts định nghĩa các thuộc tính liên quan đến font và cách tải tài nguyên font. Nó cho phép bạn định nghĩa kiểu của font, chẳng hạn như họ font, kích thước và độ đậm, cũng như các biến thể glyph cần sử dụng khi có nhiều biến thể cho một ký tự.

Font là tệp tài nguyên chứa biểu diễn trực quan của các ký tự, ánh xạ mã ký tự sang các glyph đại diện cho chữ cái, số, dấu câu và thậm chí cả emoji của một typeface. Font family là nhóm các font chia sẻ phong cách thiết kế chung và các thuộc tính font, với mỗi thành viên trong nhóm cung cấp các cách khác nhau để hiển thị các glyph, thay đổi theo độ đậm nét, độ nghiêng, hoặc chiều rộng tương đối, trong số các thuộc tính khác. Font thường đại diện cho một kiểu duy nhất của một typeface, chẳng hạn như Helvetica Bold và Italic. Font family là tập hợp đầy đủ của tất cả các kiểu. Việc bao gồm font như vậy trong tài liệu hoặc thiết kế được thực hiện bằng cách định nghĩa một khai báo @font-face riêng biệt cho mỗi tài nguyên font.

Các thuộc tính, at-rule, và descriptor của module CSS fonts cho phép tải xuống nhiều biến thể của font. Chúng cũng định nghĩa tệp font cần sử dụng cho một đặc điểm font cụ thể, cùng với hướng dẫn dự phòng trong trường hợp tài nguyên không tải được. Cơ chế lựa chọn font CSS mô tả quá trình khớp một tập hợp các thuộc tính font CSS với một font face duy nhất.

Module CSS fonts cũng hỗ trợ variable fonts. Không giống như các font thông thường, nơi mỗi kiểu được triển khai như một tệp font riêng biệt, variable fonts có thể chứa tất cả các kiểu trong một tệp duy nhất. Bằng cách sử dụng một khai báo @font-face duy nhất, bạn có thể nhập một variable font bao gồm tất cả các kiểu. Tùy thuộc vào font, điều này có thể bao gồm nhiều biến thể font. Variable fonts là một phần của đặc tả font OpenType.

Tham chiếu

Thuộc tính

At-rule và descriptor

At-rule: @font-face

Descriptor:

Module CSS fonts cũng định nghĩa các descriptor font-language-override, font-named-instance, font-size, subscript-position-override, subscript-size-override, superscript-position-override, và superscript-size-override. Hiện tại, không có trình duyệt nào hỗ trợ các tính năng này.

Module CSS fonts cũng định nghĩa descriptor font-display. Hiện tại, không có trình duyệt nào hỗ trợ tính năng này.

At-rule: @font-palette-values

Descriptor:

Hàm

Module CSS fonts định nghĩa hàm generic(). Hiện tại, không có trình duyệt nào hỗ trợ tính năng này.

Kiểu dữ liệu

Kiểu font-size:

Kiểu font-family:

Kiểu font-feature-settings:

Kiểu font-format:

Kiểu font-stretch:

Kiểu font-tech:

Kiểu font-variant:

Kiểu font-variant-ligatures:

Kiểu font-variant-numeric:

Kiểu font-weight:

Interfaces

Hướng dẫn

Học: Căn bản về tạo kiểu văn bản và font

Bài học dành cho người mới bắt đầu này bao gồm các nguyên tắc cơ bản về tạo kiểu văn bản và font. Nó bao gồm cách đặt độ đậm font, họ font và kiểu bằng cách sử dụng viết tắt font và cách căn chỉnh văn bản và quản lý khoảng cách dòng và chữ cái.

Học: Web fonts

Bài học dành cho người mới bắt đầu này giải thích cách sử dụng các font tùy chỉnh trên trang web của bạn để cho phép tạo kiểu văn bản đa dạng và tùy chỉnh hơn.

Tính năng font OpenType

Các tính năng hoặc biến thể font đề cập đến các glyph hoặc kiểu ký tự khác nhau có trong font OpenType. Những thứ này bao gồm ligature (glyph đặc biệt kết hợp các ký tự như 'fi' hoặc 'ffl'), kerning (điều chỉnh khoảng cách giữa các cặp chữ cái cụ thể), phân số, kiểu số, và một số thứ khác. Tất cả những điều này được gọi là các tính năng OpenType, và được cung cấp để sử dụng trên web thông qua các thuộc tính cụ thể và thuộc tính điều khiển cấp thấp — font-feature-settings. Bài viết này cung cấp cho bạn tất cả những gì bạn cần biết về việc sử dụng các tính năng font OpenType trong CSS.

Web Open Font Format (WOFF)

WOFF sử dụng phiên bản nén của cùng cấu trúc sfnt dựa trên bảng được sử dụng bởi TrueType, OpenType, và Open Font Format, nhưng thêm metadata và cấu trúc dữ liệu sử dụng riêng, bao gồm các trường được xác định trước cho phép các nhà sản xuất và nhà cung cấp cung cấp thông tin giấy phép nếu muốn.

Variable fonts

Bài viết này sẽ giúp bạn bắt đầu sử dụng variable fonts.

Cải thiện hiệu suất font

Bài viết này, một phần của hướng dẫn hiệu suất CSS, thảo luận về tải font, chỉ tải các glyph cần thiết, và định nghĩa hành vi hiển thị font với descriptor font-display.

Khái niệm liên quan

Đặc tả

Thông số kỹ thuật
CSS Fonts Module Level 4

Xem thêm

Help improve MDN

Tìm hiểu cách đóng góp

This page was last modified on by MDN contributors.

Xem trang này trên GitHub • Báo cáo sự cố với nội dung này