Hướng dẫn font-family css là gì

Thuộc tính font-family được dùng để chỉ ra font cho phần tử. Có hai kiểu tên font:

• font family chỉ ra font family ví dụ Times New Roman hoặc Arial
• generic family nhóm các font family có cách hiện thị tương tự nhau ví dụ Serif, Monospace

generic family	font family
Serif	Times New Roman Georgia
Sans-serif	Arial Verdana
Monospace	Courier New Lucida Console

Ví dụ có HTML như sau:

   This is a paragraph shown in serif font.


   This is a paragraph shown in sans-serif font.
 

   This is a paragraph shown in monospace font.
 

   This is a paragraph shown in cursive font.
 

   This is a paragraph shown in fantasy font.

Giờ dùng CSS để thiết lập font chữ cho các đoạn văn trên

Kết quả:

This is a paragraph shown in serif font.

This is a paragraph shown in sans-serif font.

This is a paragraph shown in monospace font.

This is a paragraph shown in cursive font.

This is a paragraph shown in fantasy font.

Lưu ý các giá trị trong font-family cách nhau bằng dấu , các giá trị này được trình duyệt sử dụng thay thế nhau. Nếu font thứ nhất tìm không ra, nó sử dụng font tiếp theo ...

body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- Generic Font Families

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 fonts	Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
Greek fonts	Bitstream Cyberbit
Cyrillic fonts	Adobe Minion Cyrillic, Excelsior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinist
Hebrew fonts	New Peninim, Raanana, Bitstream Cyberbit
Japanese fonts	Ryumin Light-KL, Kyokasho ICA, Futo Min A101
Arabic fonts	Bitstream Cyberbit
Cherokee fonts	Lo 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 fonts	Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
Greek fonts	Bitstream Cyberbit
Cyrillic fonts	Adobe Minion Cyrillic, Excelsior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinist
Hebrew fonts	New Peninim, Raanana, Bitstream Cyberbit
Japanese fonts	Ryumin Light-KL, Kyokasho ICA, Futo Min A101
Arabic fonts	Bitstream Cyberbit
Cherokee fonts	Lo 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í.

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

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 fonts	MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
Greek fonts	Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
Cyrillic fonts	Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
Hebrew fonts	Arial Hebrew, MS Tahoma
Japanese fonts	Shin Go, Heisei Kaku Gothic W5
Arabic fonts	MS Tahoma

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

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 fonts	Courier, MS Courier New, Prestige, Everson Mono
Greek Fonts	MS Courier New, Everson Mono
Cyrillic fonts	ER Kurier, Everson Mono
Japanese fonts	Osaka Monospaced
Cherokee fonts	Everson 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 fonts	Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
Cyrillic fonts	ER Architekt
Hebrew fonts	Corsiva
Arabic fonts	DecoType Naskh, Monotype Urdu 507

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

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.

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.

Rất dễ dàng để sử dụng phông chữ hệ thống cho trang web của bạn:

body {
  font-family: system-ui;
}

Có một vài website nổi tiếng sử dụng phông chữ hệ thống, chẳng hạn: