Các loại font trong CSS

Trong thiết kế website, lựa chọn một phông chữ (font) phù hợp là rất quan trọng và góp phần không nhỏ vào thành công của website. Người dùng sử dụng trình duyệt của họ và truy cập vào Website của bạn, phông chữ mà Website mong muốn có thể không sẵn có trên máy tính của người dùng, hoặc nguồn dữ liệu phông không tồn tại, vì vậy trong thiết kế website bạn phải khai báo thêm một vài phông chữ dự phòng, các phông chữ ở đầu danh sách sẽ có mức độ ưu tiên cao hơn.

Hãy xem một đoạn code sau:

body {
    font-family: Arial, Roboto, "Times New Roman";
}

Đoạn mã CSS ở trên có nghĩa là: Phần tử sẽ ưu tiên sử dụng phông chữ Arial. Các phông chữ Roboto, "Times New Roman" là các phông chữ dự phòng.

Font family name

Thuật ngữ "Font family name" ám chỉ tên của một bộ phông cụ thể, chẳng hạn Arial, Roboto, "Times New Roman", ...

Generic font family name

Thuật ngữ "Generic font family name" ám chỉ tên của một nhóm các bộ phông chữ nhìn tương tự nhau, CSS dựa trên các đặc điểm của các phông chữ để phân loại chúng. Dưới đây là danh sách các "Generic font family" thông dụng:

• serif
• sans-serif
• monospace
• cursive
• fantasy
• system-ui
• emoji
• math
• fangsong

"Generic Font Family" là một cơ chế dự phòng, nó được sử dụng khi người thiết kế website chỉ quan tâm tới đặc điểm của phông chữ mà không chỉ định rõ một tên phông chữ cụ thể. Khi hiển thị văn bản, trình duyệt sẽ tìm một phông chữ phù hợp sẵn có trên máy tính người dùng để sử dụng.

Hãy xem một đoạn code:

body {
    font-family: "MS Georgia", serif;
}

Đoạn mã CSS ở trên có nghĩa là: Phần tử sẽ ưu tiên sử dụng phông chữ "MS Georgia". Nếu phông chữ "MS Georgia" không sẵn có trên máy tính người dùng, trình duyệt sẽ sử dụng một phông nào đó là thành viên của "bộ phông chữ chung" (generic font family) Serif như một giải pháp thay thế.

Có rất nhiều phông chữ là thành viên của nhóm Serif mà trình duyệt có thể sử dụng, chẳng hạn:

Latin fontsTimes New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream CyberbitGreek fontsBitstream CyberbitCyrillic fontsAdobe Minion Cyrillic, Excelsior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER BukinistHebrew fontsNew Peninim, Raanana, Bitstream CyberbitJapanese fontsRyumin Light-KL, Kyokasho ICA, Futo Min A101Arabic fontsBitstream CyberbitCherokee fontsLo Cicero Cherokee

Có khá nhiều các "generic font family" nhưng chỉ có 3 nhóm phông chữ đầu tiên được hỗ trợ rộng rãi.

Ví dụ dưới đây cho phép bạn xem trực tiếp các "generic font family". Chú ý, 3 nhóm phông chữ đầu tiên được hỗ trợ rộng rãi, các nhóm phông chữ khác có thể không sẵn có trên máy tính của bạn, và bạn có thể không thấy được chính xác nó.

2- Serif

Đặc điểm của phông chữ Serif đó là: Các nét (stroke) của ký tự có thể có một nét nhỏ đính vào phía cuối của nó, nét nhỏ này được sử dụng để trang trí cho nét lớn, chúng cũng được gọi là các serif.

Một vài phông chữ thông dụng thuộc nhóm Serif:

Latin fontsTimes New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream CyberbitGreek fontsBitstream CyberbitCyrillic fontsAdobe Minion Cyrillic, Excelsior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER BukinistHebrew fontsNew Peninim, Raanana, Bitstream CyberbitJapanese fontsRyumin Light-KL, Kyokasho ICA, Futo Min A101Arabic fontsBitstream CyberbitCherokee fontsLo Cicero Cherokee

Nếu bạn đang quan tâm tới các phông chữ Serif, hãy cân nhắc tải về và sử dụng các phông dưới đây, chúng đẹp và miễn phí.

Bodony

Domaine Display

Garamond

Century725

Playfair

Tìm kiếm các phông chữ Serif khác:

• https://www.fontsquirrel.com/fonts/list/classification/serif

3- Sans Serif

"Sans" là một từ tiếng Pháp, nó có nghĩa là "Without" trong tiếng Anh. Vậy "Sans Serif" có nghĩa là "Without Sarif". Bây giờ bạn đã hiểu các phông chữ "Sans Serif" có đặc điểm gì rồi chứ?

.element  {
     font-family: sans-serif;
}

Một vài phông chữ thông dụng thuộc nhóm Sans Serif:

Latin fontsMS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, HelveticaGreek fontsAttika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica GreekCyrillic fontsHelvetica Cyrillic, ER Univers, Lucida Sans Unicode, BastionHebrew fontsArial Hebrew, MS TahomaJapanese fontsShin Go, Heisei Kaku Gothic W5Arabic fontsMS Tahoma

Tìm kiếm các phông chữ Sans Serif khác:

• Sans Serif

4- Monospace

Một tiêu chí duy nhất của các phông chữ Monospace là tất cả các hình chữ (glyph) có cùng một chiều rộng cố định.

Một vài phông chữ thông dụng thuộc nhóm Monospace:

Latin fontsCourier, MS Courier New, Prestige, Everson MonoGreek FontsMS Courier New, Everson MonoCyrillic fontsER Kurier, Everson MonoJapanese fontsOsaka MonospacedCherokee fontsEverson Mono

5- Cursive

Cursive là tên chung cho các phông chữ mà 2 ký tự liên tiếp thường kết nối với nhau bởi một nét (stroke), văn bản sử dụng phông chữ Cursive giống như được viết bởi con người hơn là một sản phẩm in ấn.

Một vài phông chữ thông dụng thuộc nhóm Cursive:

Latin fontsCaflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-ChanceryCyrillic fontsER ArchitektHebrew fontsCorsivaArabic fontsDecoType Naskh, Monotype Urdu 507

Tìm kiếm các phông chữ Cursive:

• Cursive Fonts

6- Fantasy

Rất khó để đưa ra một định nghĩa về các phông chữ Fantasy (Kỳ ảo, ảo tưởng). Nhưng có một đặc điểm của các phông chữ này là chúng kỳ lạ, ngẫu hứng, và khó đọc hơn so với các phông chữ Cursive.

• Tribal Dragon

• Fantasy Font

7- System-ui

Mỗi hệ điều hành đều có một phông chữ mặc định tuyệt vời, chúng được gọi là phông chữ hệ thống giao diện người dùng (System UI Font).

• Hệ điều hành Windows sử dụng phông chữ Segoe UI.
• Hệ điều hành Macintosh sử dụng phông chữ San Francisco.
• ...

Một website sử dụng phông chữ mặc định của hệ thống (hệ điều hành) sẽ có được lợi thế lớn về mặt hiệu suất và tốc độ, đồng thời giảm kích thước trang web của bạn.

Một tác dụng nữa của việc sử dụng phông chữ hệ thống là làm cho website của bạn rất quen thuộc với người dùng, vì nó sử dụng chính phông chữ mà hệ điều hành của người dùng đang sử dụng.