Bạn sẽ cải thiện khả năng đọc của bài viết bằng font phù hợp, độ dài dòng và khoảng dòng. Đồng thời phân biệt thiếu glyph tiếng Việt, thiếu độ đậm và dữ liệu đã bị lỗi mã hóa.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Chữ dễ đọc trước khi chữ đẹp

Một font phù hợp chưa đủ nếu dòng quá dài, chữ quá nhỏ hoặc khoảng dòng chật. Với bài viết, hãy kiểm tra đoạn văn thật nhiều câu, có chữ có dấu và chữ đậm, thay vì chỉ nhìn một dòng tiêu đề tiếng Anh.

Font stack là danh sách ưu tiên. Trình duyệt có thể dùng font dự phòng cho ký tự mà font đầu thiếu. Vì vậy một đoạn tiếng Việt có thể trông lệch dù CSS computed vẫn liệt kê cùng font-family; cần kiểm tra font thực sự được dùng và tài nguyên đã tải.

Độ đậm và bộ ký tự phải khớp tài nguyên

Nếu tự tải webfont, chọn bản có hỗ trợ tiếng Việt và các weight cần dùng. Viết font-weight:700 không tự tạo ra tệp font đúng độ đậm nếu nguồn chỉ có một bản thường; trình duyệt có thể tổng hợp kiểu. Với variable font, phạm vi weight của @font-face cũng cần phù hợp.

Tài nguyên font cần giấy phép cho cách sử dụng. Không tải tệp từ nguồn không rõ rồi đăng lại. Bộ ví dụ này dùng font hệ thống và không phụ thuộc một dịch vụ font ngoài để có thể chạy ngay khi tải về.

Mẫu tự host để hiểu cấu trúc

@font-face {
  font-family: "TenFont";
  src: url("fonts/ten-font-vietnamese.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Đây là cấu trúc minh họa, không phải tệp font có sẵn trong bộ mã. font-display:swap cho phép hiển thị chữ dự phòng trong lúc chờ; việc đổi font có thể làm thay đổi bố cục. Tự host giúp kiểm soát tài nguyên nhưng vẫn cần tối ưu kích thước và kiểm tra cache.

Áp dụng và chẩn đoán đúng loại lỗi

Dùng line-height không đơn vị giúp tỷ lệ khoảng dòng đi theo cỡ chữ khi kế thừa. Giới hạn vùng bài viết bằng một giá trị đọc được; ch là đơn vị dựa trên kích thước glyph số 0, không phải số ký tự chính xác trong mọi câu.

Nếu dữ liệu đã thành Khóa, thay font thường không khôi phục chữ. Đó có thể là lỗi mã hóa ở dữ liệu hoặc quá trình đọc/ghi. Ngược lại nếu dữ liệu Unicode đúng mà glyph thiếu hoặc weight không tải, hãy sửa tài nguyên và font stack.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<article class="type-sample"><h3>Tiếng Việt: học, hiểu, thực hành</h3><p>Đây là đoạn văn có dấu để kiểm tra khả năng đọc. <strong>Chữ đậm</strong> cần nhìn nhất quán với chữ thường, không chỉ đẹp ở một dòng ngắn.</p></article>

Thêm hoặc sửa trong styles.css

.reading, .type-sample { max-width: 65ch; }
.type-sample { font-size: 1.125rem; line-height: 1.75; }
.type-sample h3 { line-height: 1.25; margin-block: 1.5em 0.5em; }
button, input, select, textarea { font: inherit; }

So sánh trước và sau

Bản sau giới hạn dòng và tăng khoảng dòng cho phần đọc mẫu. Không có webfont bên ngoài được tải; nếu muốn dùng Montserrat, cần thêm tài nguyên hợp lệ thay vì chỉ viết tên font.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Chỉ khai báo tên font nhưng chưa tải tài nguyên: kiểm tra Network và rendered fonts.
• Thay font để chữa chữ bị mojibake: kiểm tra dữ liệu Unicode.
• Dùng line-height quá thấp cho tiêu đề nhiều dòng: thử nội dung dài.

Tự kiểm tra

• Thử chữ Đ, ă, ơ, ư cùng các dấu để kiểm tra glyph.
• Bỏ quy tắc font:inherit của form và quan sát kiểu chữ điều khiển.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML