Văn bản và kiểu chữ

Podcast CSS – 036: Văn bản và kiểu chữ

Văn bản là một trong những thành phần cốt lõi của web.

Khi tạo trang web, bạn không nhất thiết phải tạo kiểu cho văn bản; HTML thực sự có một số kiểu mặc định khá hợp lý.

Tuy nhiên, văn bản có thể chiếm phần lớn trang web của bạn, vì vậy, bạn nên thêm một số kiểu để làm đẹp trang web. Bằng cách thay đổi một vài thuộc tính cơ bản, bạn có thể cải thiện đáng kể trải nghiệm đọc cho người dùng!

Trong mô-đun này, chúng ta sẽ bắt đầu với quy tắc @font-face. Quy tắc này cho phép bạn nhập phông chữ tuỳ chỉnh vào trang web của mình. Điều này đảm bảo rằng bạn có kiểu chữ chính xác mà bạn cần, độc lập với phông chữ do người dùng cài đặt.

Sau đó, chúng ta sẽ đề cập đến các thuộc tính phông chữ CSS thiết yếu bao gồm font-family, font-style, font-weight và font-size. Những khái niệm cơ bản này tạo tiền đề để thao tác với văn bản cho cả kiểu và khả năng đọc.

Chúng ta cũng sẽ đề cập đến các thuộc tính dành riêng cho đoạn văn như text-indent và word-spacing, trước khi kết thúc bằng các chủ đề nâng cao như phông chữ biến thiên và phần tử giả, giúp bạn tinh chỉnh thêm khả năng kiểm soát kiểu chữ.

Chúng tôi sẽ cung cấp các mẹo và ví dụ thực tế để giúp bạn hiểu rõ và áp dụng các kỹ thuật CSS này.

Quy tắc @font-face

Quy tắc tại CSS @font-face đóng vai trò quan trọng trong việc thiết kế web, cho phép bạn chỉ định và sử dụng phông chữ tuỳ chỉnh để hiển thị văn bản. Ưu điểm của @font-face nằm ở khả năng linh hoạt: nó cho phép bạn lấy nguồn phông chữ từ một máy chủ từ xa hoặc từ phông chữ đã cài đặt trên thiết bị của người dùng.

Cú pháp

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

Thuộc tính mô tả

ascent-override
Tuỳ chỉnh chỉ số về độ cao, tác động đến khoảng trống phía trên đường cơ sở.
descent-override
Điều chỉnh chỉ số đi xuống, ảnh hưởng đến khoảng không bên dưới đường cơ sở.
font-display
Kiểm soát hành vi hiển thị của phông chữ tuỳ thuộc vào trạng thái tải xuống của phông chữ.
font-family
Gán tên cho phông chữ để sử dụng trong các thuộc tính liên quan đến phông chữ.
font-stretch
Đặt tỷ lệ ngang được chấp nhận, được chỉ định dưới dạng một giá trị hoặc phạm vi duy nhất.
font-style
Xác định kiểu phông chữ, hỗ trợ các phạm vi góc cho kiểu nghiêng.
font-weight
Xác định độ đậm hoặc phạm vi độ đậm của phông chữ.
font-feature-settings
Cho phép sử dụng các tính năng phông chữ OpenType.
font-variation-settings
Mang đến khả năng kiểm soát tinh chỉnh các chế độ cài đặt phông chữ đa dạng.
line-gap-override
Ghi đè khoảng cách dòng mặc định của phông chữ.
size-adjust
Áp dụng hệ số tỷ lệ cho đường viền và các chỉ số của phông chữ.
src
Xác định nguồn phông chữ, dù là cục bộ hay từ xa. Điều này là bắt buộc đối với quy tắc @font-face. Việc kết hợp url() và local() trong src là một chiến lược phổ biến sử dụng phông chữ cục bộ nếu có, quay lại tệp phông chữ từ xa làm phương án dự phòng. Trình duyệt ưu tiên các tài nguyên dựa trên thứ tự khai báo, vì vậy, local() thường phải đứng trước url().
unicode-range
Giới hạn các ký tự mà phông chữ này sẽ được dùng.

Mô tả

@font-face giải phóng nhà thiết kế khỏi những hạn chế của phông chữ "an toàn cho web" bằng cách cho phép họ sử dụng kiểu chữ tuỳ chỉnh. Khả năng tìm kiếm phông chữ trên thiết bị của người dùng của hàm local() mang đến trải nghiệm liền mạch mà không nhất thiết phải phụ thuộc vào kết nối Internet.

Loại MIME của phông chữ

Định dạng Loại MIME
TrueType font/ttf
OpenType font/otf
Định dạng phông chữ mở trên web font/woff
Định dạng phông chữ mở trên web 2 font/woff2

Sự khác biệt giữa @font-face và font-family

Trong CSS, @font-face và font-family thường bị nhầm lẫn, nhưng phục vụ các mục đích riêng biệt.

Như chúng ta đã thảo luận, @font-face là một quy tắc dùng để xác định mọi phông chữ tuỳ chỉnh mà bạn muốn dùng trong ứng dụng web của mình. Tệp này cho trình duyệt biết nơi tải phông chữ xuống, cách hiển thị phông chữ trong khi tải (bằng thuộc tính font-display) và chỉ định tập hợp con ký tự cần tải xuống (bằng unicode-range).

Ngược lại, font-family là một thuộc tính CSS được dùng trong quy tắc CSS để chỉ định một phông chữ cụ thể hoặc danh sách phông chữ cho một phần tử. Các phông chữ được liệt kê trong font-family có thể là phông chữ an toàn cho web, phông chữ hệ thống hoặc phông chữ tuỳ chỉnh được xác định bằng @font-face.

Tóm lại, @font-face khai báo một phông chữ và đặt tên cho phông chữ đó, còn font-family áp dụng phông chữ đã khai báo này cho các phần tử HTML.

Sau đây là ví dụ về cách sử dụng cả hai:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

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

Trong ví dụ này, @font-face xác định "CustomFont" và cho trình duyệt biết vị trí tìm thấy phông chữ đó. Sau đó, thuộc tính font-family sẽ áp dụng phông chữ này cho phần tử body, với Arial làm phông chữ dự phòng nếu không có "CustomFont".

Thay đổi kiểu chữ

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Sử dụng font-family để thay đổi kiểu chữ của văn bản.

Thuộc tính font-family chấp nhận danh sách các chuỗi được phân tách bằng dấu phẩy, tham chiếu đến bộ phông chữ cụ thể hoặc chung. Các bộ phông chữ cụ thể là các chuỗi được trích dẫn, chẳng hạn như "Helvetica", "EB Garamond" hoặc "Times New Roman". Bộ phông chữ chung là các từ khoá như serif, sans-serif và monospace (xem danh sách đầy đủ các tuỳ chọn trên MDN). Trình duyệt sẽ hiển thị kiểu chữ đầu tiên có sẵn trong danh sách được cung cấp.

Khi sử dụng font-family, bạn nên chỉ định ít nhất một bộ phông chữ chung trong trường hợp trình duyệt của người dùng không có phông chữ bạn muốn. Nhìn chung, bộ phông chữ dự phòng chung phải tương tự như phông chữ bạn muốn sử dụng: nếu sử dụng font-family: "Helvetica" (bộ phông chữ sans-serif), thì bộ phông chữ dự phòng phải là sans-serif để khớp.

Sử dụng phông chữ nghiêng và xiên

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Sử dụng font-style để đặt xem văn bản có in nghiêng hay không. font-style chấp nhận một trong các từ khoá sau: normal, italic và oblique.

In đậm văn bản

Hỗ trợ trình duyệt

  • Chrome: 2.
  • Cạnh: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Sử dụng font-weight để đặt "độ đậm" của văn bản. Thuộc tính này chấp nhận các giá trị từ khoá (normal, bold), các giá trị từ khoá tương đối (lighter, bolder) và các giá trị số (100 đến 900).

Từ khoá normal và bold tương đương với các giá trị số 400 và 700 tương ứng.

Từ khoá lighter và bolder được tính toán tương ứng với phần tử mẹ. Xem Ý nghĩa của trọng số tương đối của MDN để biết một biểu đồ hữu ích thể hiện cách xác định giá trị này.

Thay đổi kích thước văn bản

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Cạnh: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Sử dụng font-size để kiểm soát kích thước của các thành phần văn bản. Thuộc tính này chấp nhận các giá trị độ dài, tỷ lệ phần trăm và một số giá trị từ khoá.

Ngoài giá trị độ dài và phần trăm, font-size chấp nhận một số giá trị từ khoá tuyệt đối (xx-small, x-small, small, medium, large, x-large, xx-large) và một vài giá trị từ khoá tương đối (smaller, larger). Các giá trị tương đối có liên quan đến font-size của phần tử mẹ.

Thay đổi khoảng cách giữa các dòng

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Sử dụng line-height để chỉ định chiều cao của từng dòng trong một phần tử. Thuộc tính này chấp nhận số, độ dài, tỷ lệ phần trăm hoặc từ khoá normal. Nhìn chung, bạn nên sử dụng số thay vì thời lượng hoặc tỷ lệ phần trăm để tránh các vấn đề về tính kế thừa.

Thay đổi khoảng cách giữa các ký tự

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Sử dụng letter-spacing để kiểm soát khoảng cách theo chiều ngang giữa các ký tự trong văn bản. Thuộc tính này chấp nhận các giá trị chiều dài như em, px và rem.

Xin lưu ý rằng giá trị được chỉ định tăng khoảng cách tự nhiên giữa các ký tự. Trong bản minh hoạ sau, hãy thử chọn một chữ cái riêng lẻ để xem kích thước của hộp thư và cách kích thước này thay đổi theo letter-spacing.

Thay đổi dấu cách giữa các từ

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Sử dụng word-spacing để tăng hoặc giảm khoảng cách giữa các từ trong văn bản. Thuộc tính này chấp nhận các giá trị chiều dài như em, px và rem. Lưu ý rằng độ dài bạn chỉ định là dành cho khoảng cách bổ sung ngoài khoảng cách thông thường. Điều này có nghĩa là word-spacing: 0 tương đương với word-spacing: normal.

font viết tắt

Bạn có thể sử dụng thuộc tính viết tắt font để đặt nhiều thuộc tính liên quan đến phông chữ cùng một lúc. Danh sách các thuộc tính có thể có là font-family, font-size, font-stretch, font-style, font-variant, font-weight và line-height.

Hãy xem bài viết về font của MDN để biết thông tin cụ thể về cách sắp xếp các thuộc tính này.

Thay đổi cách viết hoa của văn bản

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Sử dụng text-transform để sửa đổi cách viết hoa của văn bản mà không cần thay đổi HTML cơ bản. Thuộc tính này chấp nhận các giá trị từ khoá sau: uppercase, lowercase và capitalize.

Thêm dấu gạch dưới, gạch trên và gạch ngang vào văn bản

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Sử dụng text-decoration để thêm dòng vào văn bản. Đường gạch dưới được sử dụng phổ biến nhất, nhưng bạn cũng có thể thêm đường kẻ phía trên hoặc ngay trong văn bản!

Thuộc tính text-decoration là viết tắt của các thuộc tính cụ thể hơn được nêu chi tiết bên dưới.

Thuộc tính text-decoration-line chấp nhận các từ khoá underline, overline và line-through. Bạn cũng có thể chỉ định nhiều từ khoá cho nhiều dòng.

Thuộc tính text-decoration-color đặt màu của tất cả đồ trang trí trong text-decoration-line.

Thuộc tính text-decoration-style chấp nhận các từ khoá solid, double, dotted, dashed và wavy.

Thuộc tính text-decoration-thickness chấp nhận mọi giá trị chiều dài và đặt chiều rộng nét vẽ của tất cả các phần trang trí từ text-decoration-line.

Thuộc tính text-decoration là viết tắt của tất cả các thuộc tính ở trên.

Thêm thụt lề vào văn bản

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Sử dụng text-indent để thêm thụt lề vào các khối văn bản. Thuộc tính này nhận một độ dài (ví dụ: 10px, 2em) hoặc tỷ lệ phần trăm chiều rộng của khối chứa.

Xử lý nội dung tràn hoặc bị ẩn

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

Nguồn

Sử dụng text-overflow để chỉ định cách trình bày nội dung ẩn. Có hai tuỳ chọn: clip (mặc định) sẽ cắt bớt văn bản tại điểm tràn; và ellipsis sẽ hiển thị dấu ba chấm (…) tại điểm tràn.

Kiểm soát khoảng trắng

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Thuộc tính white-space được dùng để chỉ định cách xử lý khoảng trắng trong một phần tử. Để biết thêm thông tin, hãy xem bài viết về white-space trên MDN.

white-space: pre có thể hữu ích để hiển thị hình ASCII hoặc các khối mã được thụt lề cẩn thận.

Kiểm soát cách ngắt từ

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

Nguồn

Sử dụng word-break để thay đổi cách "phân đoạn" từ khi từ đó tràn dòng. Theo mặc định, trình duyệt sẽ không tách từ. Việc sử dụng giá trị từ khoá break-all cho word-break sẽ hướng dẫn trình duyệt ngắt từ ở các ký tự riêng lẻ nếu cần.

Thay đổi cách căn chỉnh văn bản

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Cạnh: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Sử dụng text-align để chỉ định cách căn chỉnh văn bản theo chiều ngang trong một khối hoặc phần tử ô bảng. Thuộc tính này chấp nhận các giá trị từ khoá left, right, start, end, center, justify và match-parent.

Các giá trị left và right căn chỉnh văn bản tương ứng sang bên trái và bên phải của khối.

Sử dụng start và end để biểu thị vị trí bắt đầu và kết thúc của một dòng văn bản ở chế độ viết hiện tại. Do đó, start liên kết đến left bằng tiếng Anh và đến right bằng chữ viết Ả Rập được viết từ phải sang trái (RTL). Đây là các căn chỉnh logic, hãy tìm hiểu thêm trong mô-đun thuộc tính logic.

Sử dụng center để căn chỉnh văn bản vào giữa khối.

Giá trị của justify sắp xếp văn bản và tự động thay đổi khoảng cách giữa các từ để văn bản căn chỉnh với cả cạnh trái và phải của khối.

Thay đổi hướng của văn bản

Hỗ trợ trình duyệt

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Sử dụng direction để đặt hướng văn bản, ltr (trái sang phải, mặc định) hoặc rtl (phải sang trái). Một số ngôn ngữ như tiếng Ả Rập, Do Thái hoặc Ba Tư được viết từ phải sang trái, vì vậy, bạn nên sử dụng direction: rtl. Đối với tiếng Anh và tất cả các ngôn ngữ viết từ trái sang phải khác, hãy sử dụng direction: ltr.

Thay đổi dòng văn bản

Hỗ trợ trình duyệt

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Nguồn

Sử dụng writing-mode để thay đổi cách dòng và sắp xếp văn bản. Giá trị mặc định là horizontal-tb, nhưng bạn cũng có thể đặt writing-mode thành vertical-lr hoặc vertical-rl cho văn bản mà bạn muốn chạy theo chiều ngang.

Thay đổi hướng văn bản

Hỗ trợ trình duyệt

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 14.

Nguồn

Sử dụng text-orientation để chỉ định hướng của các ký tự trong văn bản. Các giá trị hợp lệ cho thuộc tính này là mixed và upright. Thuộc tính này chỉ có liên quan khi writing-mode được đặt thành một giá trị khác với horizontal-tb.

Thêm bóng vào văn bản

Hỗ trợ trình duyệt

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Nguồn

Sử dụng text-shadow để thêm bóng vào văn bản. Thuộc tính này yêu cầu 3 độ dài (x-offset, y-offset và blur-radius) và một màu sắc.

Hãy xem phần text-shadow của mô-đun về Bóng để tìm hiểu thêm.

Phông chữ biến đổi

Thông thường, phông chữ "bình thường" yêu cầu nhập các tệp khác nhau cho các phiên bản khác nhau của kiểu chữ, như in đậm, in nghiêng hoặc thu gọn. Phông chữ biến đổi là những phông chữ có thể chứa nhiều biến thể của một kiểu chữ trong một tệp.

Roboto Flex theo các tổ hợp ngẫu nhiên giữa Chiều rộng và Trọng lượng

Hãy xem bài viết của chúng tôi về Phông chữ biến thể để biết thêm thông tin.

Phần tử giả

Phần tử giả ::first-letter và ::first-line

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Các phần tử giả ::first-letter và ::first-line nhắm đến chữ cái đầu tiên và dòng đầu tiên của phần tử văn bản tương ứng.

Phần tử giả ::selection

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1.

Nguồn

Sử dụng phần tử giả ::selection để thay đổi giao diện của văn bản do người dùng chọn.

Khi sử dụng phần tử giả này, bạn chỉ có thể dùng một số thuộc tính CSS nhất định: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.

font-variant

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Cạnh: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Thuộc tính font-variant là viết tắt của một số thuộc tính CSS cho phép bạn chọn các biến thể phông chữ như small-caps và slashed-zero. Các thuộc tính CSS mà viết tắt này bao gồm là font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures và font-variant-numeric. Hãy xem các đường liên kết trên từng tài sản để biết thêm thông tin chi tiết về cách sử dụng tài sản đó.

Kiểm tra mức độ hiểu biết

Kiểm tra kiến thức của bạn về kiểu chữ trên web

Từ khoá nào sau đây có thể được dùng làm từ khoá dự phòng chung cho font-family?

serif
Chính xác!
monospace
Chính xác!
italic
Hãy thử lại. italic là từ khoá hợp lệ cho font-style, không phải font-family.
sci-fi
Hãy thử lại. Tuy nhiên, fantasy là phương án dự phòng chung hợp lệ cho font-family.
sans-serif
Chính xác!
helvetica
Hãy thử lại. "Helvetica" không phải là từ khoá chung chung mà thay vào đó là tham chiếu đến một bộ phông chữ cụ thể.

Câu lệnh nào dùng để chuyển đổi chữ cái đầu tiên của mỗi từ thành chữ hoa? Ví dụ: This is a sentence. ➡ This Is A Sentence.

text-capitalize: true;
Hãy thử lại.
text-case: capitalize;
Hãy thử lại.
text-transform: capitalize;
Chính xác!
font-style: capitals;
Hãy thử lại.
font-variant: capitalize;
Hãy thử lại.

Đúng hay sai: Sử dụng text-orientation để căn chỉnh văn bản sang trái, phải hoặc giữa.

Đúng
Hãy thử lại. text-orientation thay đổi độ xoay của các chữ cái trong một dòng.
Sai
Chính xác! text-orientation thay đổi độ xoay của các chữ cái trong một dòng. Sử dụng text-align để căn chỉnh văn bản sang trái, phải hoặc giữa (và nhiều cách khác!).

Bạn có thể sử dụng thuộc tính CSS nào để thay đổi khoảng cách giữa các dòng văn bản?

line-spacing
Hãy thử lại.
leading
Hãy thử lại. Leading (Khoảng cách dòng) là thuật ngữ chính xác cho khoảng cách giữa các dòng trong kiểu chữ, nhưng đây không phải là thuộc tính CSS hợp lệ.
baseline-distance
Hãy thử lại.
line-height
Chính xác!

Tài nguyên