Bạn có biết, typography là linh hồn của một website đẹp? Việc lựa chọn và sử dụng font trong CSS chính là chìa khóa để tạo nên linh hồn đó. Bài viết này sẽ là người bạn đồng hành, hướng dẫn bạn từ những thuộc tính cơ bản nhất đến cách nhúng font tùy chỉnh một cách chuyên nghiệp. Cùng WiWeb tìm hiểu toàn bộ kỹ thuật định dạng chữ nhé!
Các thuộc tính font trong CSS cơ bản và quan trọng nhất
Để làm chủ font trong CSS, trước hết bạn cần nắm vững các thuộc tính nền tảng. Đây là những viên gạch đầu tiên giúp bạn xây dựng nên một giao diện văn bản đẹp mắt và dễ đọc. Hãy bắt đầu với những thuộc tính quan trọng nhất nhé.
Thuộc tính font-family: Cách chọn và khai báo font chữ
Đây là thuộc tính quyết định “diện mạo” của con chữ. font-family cho phép bạn chỉ định một hoặc nhiều tên font chữ. Trình duyệt sẽ cố gắng sử dụng font đầu tiên trong danh sách. Nếu không tìm thấy, nó sẽ thử font tiếp theo. Đây được gọi là cơ chế font dự phòng (fallback).
p {
font-family: "Roboto", Arial, sans-serif;
}
Trong ví dụ trên, trình duyệt sẽ ưu tiên dùng font Roboto. Nếu máy người dùng không có Roboto, nó sẽ tìm đến Arial. Cuối cùng nếu cả hai đều không có, nó sẽ dùng một font sans-serif mặc định bất kỳ trên hệ thống.
Thuộc tính font-size: Điều chỉnh kích thước văn bản
Đúng như tên gọi, font-size giúp bạn kiểm soát kích thước của chữ. Bạn có thể dùng nhiều đơn vị khác nhau, nhưng phổ biến nhất là:
- px (pixels): Kích thước cố định, dễ kiểm soát.
- rem (root em): Kích thước tương đối so với thẻ
<html>. Rất tốt cho việc xây dựng giao diện responsive.
h1 {
font-size: 32px;
}
p {
font-size: 1.6rem; /* Tương đương 16px nếu font-size gốc là 10px */
}
Thuộc tính font-weight: Thay đổi độ đậm nhạt
Bạn muốn nhấn mạnh một đoạn văn bản? font-weight là công cụ bạn cần. Thuộc tính này điều khiển độ đậm của nét chữ. Bạn có thể dùng các giá trị từ khóa như normal (thường), bold (đậm) hoặc các giá trị số từ 100 đến 900.
400tương đương với normal.700tương đương với bold.
.important-text {
font-weight: bold; /* Hoặc font-weight: 700; */
}
Thuộc tính font-style: Tạo kiểu chữ in nghiêng
Để tạo kiểu chữ nghiêng, bạn hãy dùng font-style. Các giá trị phổ biến nhất là normal (mặc định) và italic (in nghiêng).
em {
font-style: italic;
}
Các thuộc tính định dạng chữ phổ biến khác
Ngoài những thuộc tính trên, có một vài người bạn đồng hành không thể thiếu để văn bản của bạn hoàn hảo hơn:
- line-height: Quy định chiều cao của một dòng văn bản. Nó giúp tạo khoảng cách giữa các dòng, làm cho văn bản thoáng và dễ đọc hơn.
- color: Đặt màu cho chữ. Bạn có thể dùng tên màu, mã HEX, RGB.
- text-align: Căn chỉnh vị trí văn bản theo chiều ngang (trái, phải, giữa, đều hai bên).
p {
line-height: 1.5; /* Khoảng cách dòng bằng 1.5 lần kích thước font */
color: #333333; /* Màu xám đậm */
text-align: justify; /* Căn đều hai bên */
}
Tối ưu code với thuộc tính viết tắt font (Shorthand)
Sau khi làm quen với các thuộc tính riêng lẻ, bạn sẽ thấy việc viết đi viết lại chúng khá tốn thời gian. May mắn thay, CSS cung cấp một thuộc tính viết tắt cực kỳ tiện lợi là font. Nó cho phép bạn gộp nhiều giá trị vào cùng một dòng code, giúp mã nguồn của bạn ngắn gọn và sạch sẽ hơn rất nhiều.
Cú pháp và cách sử dụng thuộc tính font shorthand
Cú pháp của thuộc tính font có một trật tự nhất định. Bạn cần tuân thủ thứ tự này để trình duyệt có thể hiểu đúng.
/* font: [font-style] [font-weight] [font-size]/[line-height] [font-family]; */
Trong đó:
- font-size và font-family là hai giá trị bắt buộc phải có.
- Các giá trị khác như
font-style,font-weight,line-heightlà tùy chọn. line-heightphải đi ngay saufont-sizevà được ngăn cách bằng dấu gạch chéo/.
Ví dụ thực tế và các lưu ý khi sử dụng
Hãy xem sự khác biệt nhé. Thay vì viết như thế này:
.description {
font-style: italic;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
font-family: Georgia, serif;
}
Bạn có thể rút gọn lại chỉ trong một dòng:
.description {
font: italic 400 16px/1.5 Georgia, serif;
}
Lưu ý quan trọng: Khi sử dụng thuộc tính viết tắt font, bất kỳ giá trị nào bạn không khai báo sẽ được trả về giá trị mặc định của trình duyệt. Ví dụ, nếu bạn không khai báo font-weight, nó sẽ tự động trở thành normal (400), ngay cả khi trước đó bạn đã đặt nó là bold. Hãy cẩn thận với điểm này nhé!
Hướng dẫn cách thêm font chữ vào CSS (Font tùy chỉnh)
Các font chữ mặc định đôi khi không đủ để thể hiện cá tính thương hiệu của bạn. Đây là lúc chúng ta cần thêm font vào CSS. Có hai phương pháp chính và phổ biến nhất để làm điều này. Cả hai đều rất dễ thực hiện.
Phương pháp 1: Nhúng font tự host với quy tắc @font-face
Đây là cách bạn toàn quyền kiểm soát file font của mình. Bạn sẽ tải các file font (như .ttf, .woff, .woff2) lên hosting của website và dùng quy tắc @font-face để khai báo chúng trong CSS. Cách này rất hữu ích khi bạn dùng các font độc quyền hoặc muốn website hoạt động mà không phụ thuộc vào bên thứ ba.
Cách thực hiện rất đơn giản:
- Đặt file font của bạn vào một thư mục trên website (ví dụ:
/fonts/). - Khai báo font trong file CSS của bạn bằng thuộc tính @font-face.
@font-face {
font-family: 'MyCustomFont'; /* Đặt tên cho font của bạn */
src: url('/fonts/MyCustomFont.woff2') format('woff2'),
url('/fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Sau khi khai báo, bạn có thể sử dụng ‘MyCustomFont’ như bất kỳ font nào khác trong thuộc tính font-family.
Phương pháp 2: Cách nhúng Google Font vào HTML & CSS (phổ biến nhất)
Google Fonts là một thư viện font miễn phí khổng lồ và là lựa chọn của hầu hết các nhà phát triển web. Cách dùng Google Font trong CSS cực kỳ nhanh chóng và tiện lợi.
- Truy cập trang Google Fonts và chọn font bạn yêu thích.
- Chọn các kiểu (độ đậm, in nghiêng) bạn muốn sử dụng.
- Google Fonts sẽ cung cấp cho bạn một đoạn mã. Bạn có hai lựa chọn để nhúng font vào website:
- Dùng thẻ
<link>: Sao chép đoạn mã<link>và dán vào trong thẻ<head>của file HTML. - Dùng
@import: Sao chép đoạn mã@importvà dán lên đầu file CSS của bạn.
- Dùng thẻ
Ví dụ nhúng bằng thẻ <link>:
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
</head>
Sau đó, chỉ cần gọi tên font trong CSS:
body {
font-family: 'Lato', sans-serif;
}
Web Safe Fonts là gì? Tại sao cần có font dự phòng (fallback)?
Web Safe Fonts là những font chữ được cài đặt sẵn trên hầu hết các hệ điều hành (như Arial, Times New Roman, Verdana, Georgia). Sử dụng chúng đảm bảo văn bản của bạn sẽ hiển thị nhất quán trên mọi thiết bị.
Tuy nhiên, khi bạn dùng font tùy chỉnh (như Google Fonts), có thể xảy ra trường hợp font không tải được do lỗi mạng. Đây là lý do tại sao font dự phòng (fallback) lại cực kỳ quan trọng. Bằng cách thêm một Web Safe Font vào cuối danh sách font-family, bạn đảm bảo rằng người dùng vẫn có thể đọc được nội dung dù font chính của bạn gặp sự cố.
Gợi ý một số CSS Font chữ đẹp và mẹo chọn font hiệu quả
Biết cách sử dụng các thuộc tính là một chuyện, nhưng chọn được font chữ đẹp và phù hợp lại là một nghệ thuật. Một cặp font được kết hợp khéo léo có thể nâng tầm thiết kế của bạn. Dưới đây là một vài gợi ý và tiêu chí từ WiWeb.
Các cặp font kết hợp đẹp cho Tiêu đề và Nội dung
Nguyên tắc chung là tạo ra sự tương phản nhưng hài hòa. Bạn có thể kết hợp một font không chân (sans-serif) cho tiêu đề để tạo cảm giác hiện đại, mạnh mẽ và một font có chân (serif) cho nội dung để dễ đọc.
- Oswald & Roboto: Oswald mạnh mẽ, cô đọng cho tiêu đề. Roboto đơn giản, rõ ràng cho nội dung.
- Montserrat & Lato: Cả hai đều là font không chân nhưng Montserrat có nét cá tính, phù hợp với tiêu đề, trong khi Lato lại rất thân thiện và dễ đọc.
- Playfair Display & Source Sans Pro: Playfair Display là một font serif thanh lịch, sang trọng cho tiêu đề. Source Sans Pro là font không chân trung tính, giúp đoạn văn bản dễ đọc.
Tiêu chí chọn font phù hợp cho website của bạn
Không có font nào là “tốt nhất” cho mọi website. Hãy dựa vào các tiêu chí sau để đưa ra lựa chọn đúng đắn:
- Tính dễ đọc (Readability): Đây là ưu tiên số một. Font chữ phải rõ ràng ở mọi kích thước, đặc biệt là trên màn hình di động.
- Phù hợp với tính cách thương hiệu: Website của bạn mang phong cách vui tươi, nghiêm túc, sang trọng hay tối giản? Font chữ phải phản ánh được điều đó.
- Hỗ trợ tiếng Việt: Rất quan trọng! Hãy đảm bảo font bạn chọn hiển thị đầy đủ và chính xác các ký tự có dấu của tiếng Việt.
- Số lượng kiểu dáng: Một font tốt nên có nhiều độ đậm nhạt (light, regular, medium, bold…) để bạn linh hoạt trong thiết kế.
Tối ưu hiệu suất khi sử dụng font trên website
Sử dụng font tùy chỉnh có thể làm chậm tốc độ tải trang nếu không được tối ưu đúng cách. Một website tải chậm sẽ ảnh hưởng tiêu cực đến trải nghiệm người dùng và cả thứ hạng SEO. Dưới đây là hai kỹ thuật đơn giản nhưng cực kỳ hiệu quả.
Sử dụng định dạng font hiện đại (.woff2) để giảm dung lượng
WOFF2 (Web Open Font Format 2) là định dạng font chữ được nén tốt hơn so với các định dạng cũ như WOFF hay TTF. Điều này có nghĩa là dung lượng file sẽ nhỏ hơn đáng kể, giúp trình duyệt tải font về nhanh hơn.
Khi sử dụng @font-face, bạn nên ưu tiên woff2 lên đầu trong danh sách src. Hầu hết các trình duyệt hiện đại đều hỗ trợ định dạng này.
@font-face {
font-family: 'MyCustomFont';
src: url('my-font.woff2') format('woff2'), /* Ưu tiên định dạng này */
url('my-font.woff') format('woff');
}
Cải thiện tốc độ tải trang với thuộc tính font-display
Khi trình duyệt tải một font tùy chỉnh, nó có thể ẩn văn bản cho đến khi font được tải xong. Điều này tạo ra hiện tượng “chữ vô hình” (Flash of Invisible Text – FOIT). Thuộc tính font-display giúp bạn kiểm soát hành vi này.
Giá trị được khuyên dùng nhiều nhất là swap.
@font-face {
font-family: 'MyCustomFont';
src: url('my-font.woff2') format('woff2');
font-display: swap;
}
Với font-display: swap;, trình duyệt sẽ hiển thị văn bản ngay lập tức bằng một font dự phòng. Khi font tùy chỉnh của bạn tải xong, nó sẽ được hoán đổi vào. Cách này đảm bảo người dùng có thể đọc nội dung ngay lập tức mà không phải chờ đợi.
Lời kết
Vậy là chúng ta đã cùng nhau đi qua một hành trình toàn diện về font trong CSS. Từ những thuộc tính cơ bản, cách viết tắt, cho đến việc sử dụng font tùy chỉnh và tối ưu hiệu suất. WiWeb tin rằng với những kiến thức này, bạn hoàn toàn có thể tự tin làm chủ typography và tạo ra những website có giao diện chuyên nghiệp, cuốn hút.
Bạn có cặp font nào yêu thích hay có mẹo nào hay ho muốn chia sẻ không? Hãy để lại bình luận bên dưới nhé!
Và nếu bạn đang tìm kiếm một đối tác để xây dựng website chuyên nghiệp, đừng ngần ngại liên hệ với WiWeb. Chúng tôi luôn sẵn lòng lắng nghe và tư vấn cho bạn.
09/01/2026
08/01/2026
07/01/2026
06/01/2026
05/01/2026
04/01/2026