- Tất cả tài liệu
- Java
- Java Basic
- Java Collections Framework
- Java IO
- Java New IO
- Java Date Time
- Servlet/JSP
- Eclipse Tech
- SWT
- RCP
- RAP
- Eclipse Plugin Tools
- XML & HTML
- Java Opensource
- Java Application Servers
- Maven
- Gradle
- Servlet/Jsp
- Thymeleaf
- Spring
- Struts2
- Hibernate
- Java Web Service
- JavaFX
- SWT
- Oracle ADF
- Android
- iOS
- Python
- Swift
- C#
- C/C++
- Ruby
- Dart
- Batch
- Database
- Oracle
- MySQL
- SQL Server
- PostGres
- Other Database
- Oracle APEX
- Report
- Client
- ECMAScript / Javascript
- TypeScript
- NodeJS
- ReactJS
- Flutter
- AngularJS
- HTML
- CSS
- Bootstrap
- OS
- VPS
- Git
- SAP
- Amazon AWS
- Khác
- Chưa phân loại
- Phần mềm & ứng dụng tiện ích
- VirtualBox
- VmWare
Tìm hiểu về Generic Font Family trong CSS
- Generic Font Families
- Serif
- Sans Serif
- Monospace
- Cursive
- Fantasy
- System-ui
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ử
<body> 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 nameThuậ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 nameThuậ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ử
<body> 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í.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 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:
- https://www.fontsquirrel.com/fonts/list/find_fonts?filter%5Bclassifications%5D%5B0%5D=sans+serif&filter%5Bclassifications%5D%5B1%5D=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 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:
- https://www.fontsquirrel.com/fonts/list/find_fonts?q%5Bterm%5D=cursive&q%5Bsearch_check%5D=Y
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.
- https://www.fontspace.com/jonathan-s-harris/tribal-dragon
- https://ifonts.xyz/fantasy-font.html
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:
Các hướng dẫn CSS
- Các đơn vị tính trong CSS
- Hướng dẫn và ví dụ CSS Selectors cơ bản
- Hướng dẫn và ví dụ CSS Attribute Selector
- Hướng dẫn và ví dụ CSS Selectors kết hợp
- Hướng dẫn và ví dụ CSS Backgrounds
- Hướng dẫn và ví dụ CSS Opacity
- Hướng dẫn và ví dụ CSS Padding
- Hướng dẫn và ví dụ CSS Margins
- Hướng dẫn và ví dụ CSS Borders
- Hướng dẫn và ví dụ CSS Outline
- Hướng dẫn và ví dụ CSS box-sizing
- Hướng dẫn và ví dụ CSS max-width và min-width
- Các từ khóa min-content, max-content, fit-content, stretch trong CSS
- Hướng dẫn và ví dụ CSS Links
- Hướng dẫn và ví dụ CSS Fonts
- Tìm hiểu về Generic Font Family trong CSS
- Hướng dẫn và ví dụ CSS @font-face
- Hướng dẫn và ví dụ CSS Align
- Hướng dẫn và ví dụ CSS Cursors
- Hướng dẫn và ví dụ CSS Overflow
- Hướng dẫn và ví dụ CSS Lists
- Hướng dẫn và ví dụ CSS Tables
- Hướng dẫn và ví dụ CSS visibility
- Hướng dẫn và ví dụ CSS Display
- Hướng dẫn và ví dụ CSS Grid Layout
- Hướng dẫn và ví dụ CSS Float và Clear
- Hướng dẫn và ví dụ CSS Position
- Hướng dẫn và ví dụ CSS line-height
- Hướng dẫn và ví dụ CSS text-align
- Hướng dẫn và ví dụ CSS text-decoration
Show More
- Các hướng dẫn HTML
- Các hướng dẫn Bootstrap
- Các hướng dẫn ECMAScript, Javascript
Các hướng dẫn CSS
- Các đơn vị tính trong CSS
- Hướng dẫn và ví dụ CSS Selectors cơ bản
- Hướng dẫn và ví dụ CSS Attribute Selector
- Hướng dẫn và ví dụ CSS Selectors kết hợp
- Hướng dẫn và ví dụ CSS Backgrounds
- Hướng dẫn và ví dụ CSS Opacity
- Hướng dẫn và ví dụ CSS Padding
- Hướng dẫn và ví dụ CSS Margins
- Hướng dẫn và ví dụ CSS Borders
- Hướng dẫn và ví dụ CSS Outline
- Hướng dẫn và ví dụ CSS box-sizing
- Hướng dẫn và ví dụ CSS max-width và min-width
- Các từ khóa min-content, max-content, fit-content, stretch trong CSS
- Hướng dẫn và ví dụ CSS Links
- Hướng dẫn và ví dụ CSS Fonts
- Tìm hiểu về Generic Font Family trong CSS
- Hướng dẫn và ví dụ CSS @font-face
- Hướng dẫn và ví dụ CSS Align
- Hướng dẫn và ví dụ CSS Cursors
- Hướng dẫn và ví dụ CSS Overflow
- Hướng dẫn và ví dụ CSS Lists
- Hướng dẫn và ví dụ CSS Tables
- Hướng dẫn và ví dụ CSS visibility
- Hướng dẫn và ví dụ CSS Display
- Hướng dẫn và ví dụ CSS Grid Layout
- Hướng dẫn và ví dụ CSS Float và Clear
- Hướng dẫn và ví dụ CSS Position
- Hướng dẫn và ví dụ CSS line-height
- Hướng dẫn và ví dụ CSS text-align
- Hướng dẫn và ví dụ CSS text-decoration
Show More
- Các hướng dẫn HTML
- Các hướng dẫn Bootstrap
- Các hướng dẫn ECMAScript, Javascript
Các bài viết mới nhất
- Dart Stream Single và Broadcast
- Xử lý lỗi trong Dart Stream
- Hướng dẫn và ví dụ Dart Stream
- So sánh đối tượng trong Dart với thư viện Equatable
- Flutter BloC cho người mới bắt đầu
- Xử lý lỗi 404 trong Flutter GetX
- Ví dụ đăng nhập và đăng xuất với Flutter Getx
- Hướng dẫn và ví dụ Flutter NumberTextInputFormatter
- Hướng dẫn và ví dụ Flutter multi_dropdown
- Hướng dẫn và ví dụ Flutter flutter_form_builder
- Hướng dẫn và ví dụ Flutter GetX obs Obx
- Hướng dẫn và ví dụ Flutter GetX GetBuilder
- Từ khoá part và part of trong Dart
- Hướng dẫn và ví dụ Flutter InkWell
- Hướng dẫn và ví dụ Flutter Radio
- Bài thực hành Flutter SharedPreferences
- Hướng dẫn và ví dụ Flutter Slider
- Hướng dẫn và ví dụ Flutter SkeletonLoader
- Chỉ định cổng cố định cho Flutter Web trên Android Studio
- Tạo Module trong Flutter
Show More