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

The CSS Podcast – 036: Text & Typography

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ó khả năng sẽ 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 để trang trí cho văn bản. Bằng cách thay đổi một số 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, cho phép bạn nhập các phông chữ tuỳ chỉnh vào trang web của mình. Điều này đảm bảo bạn có kiểu chữ chính xác mà mình cần, độc lập với phông chữ do người dùng cài đặt.

Sau đó, chúng ta sẽ tìm hiểu 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 kiến thức cơ bản này đặt nền tảng cho việc thao tác với văn bản về cả kiểu chữ 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ữ có thể thay đổi và phần tử giả, giúp tinh chỉnh hơn nữa khả năng kiểm soát kiểu chữ của bạn.

Các ví dụ và mẹo thực tế sẽ được cung cấp xuyên suốt để củng cố sự hiểu biết và việc áp dụng các kỹ thuật CSS này.

Quy tắc @font-face

Quy tắc @font-face CSS đóng vai trò quan trọng trong 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. Điểm hay của @font-face là tính linh hoạt: cho phép bạn lấy phông chữ từ một máy chủ từ xa hoặc từ một phông chữ được 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")
}

Nhãn mô tả

ascent-override
Tuỳ chỉnh chỉ số tăng, ảnh hưởng đến khoảng trống phía trên đường cơ sở.
descent-override
Điều chỉnh chỉ số đường xuống, ảnh hưởng đến khoảng trố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
Đặt 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ệ điều chỉnh theo chiều ngang có thể chấp nhận được, được chỉ định là 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 dải góc cho kiểu xiên.
font-weight
Xác định độ đậm hoặc dải độ đậm của phông chữ.
font-feature-settings
Cho phép truy cập vào các tính năng của phông chữ OpenType.
font-variation-settings
Cung cấp chế độ kiểm soát chi tiết đối với các chế độ cài đặt phông chữ có thể thay đổi.
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à chỉ số của phông chữ.
src
Xác định nguồn phông chữ, cho dù là cục bộ hay từ xa. Đây là yêu cầu bắt buộc đối với quy tắc @font-face. 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. Các trình duyệt ưu tiên 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 số lượng ký tự mà phông chữ này nên được dùng.

Mô tả

@font-face giúp nhà thiết kế không bị hạn chế bởi các 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 chức năng 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
Web Open Font Format 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 chú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. Nó 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 quá trình tải (bằng thuộc tính font-display) và chỉ định nhóm ký tự con nào 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 thuộc tính này cho phần tử nội dung, với Arial làm phương án dự phòng nếu không có "CustomFont".

Thay đổi kiểu chữ

Browser Support

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

Source

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

Thuộc tính font-family chấp nhận một danh sách các chuỗi được phân tách bằng dấu phẩy, có thể đề cập đến các họ phông chữ cụ thể hoặc chung. 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 lựa chọn trên MDN). Trình duyệt sẽ hiển thị kiểu chữ đầu tiên có 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ữ mà bạn muốn. Nhìn chung, bộ phông chữ chung dự phòng phải tương tự như phông chữ bạn muốn dùng: nếu bạn dùng font-family: "Helvetica" (bộ phông chữ không chân), thì bộ phông chữ dự phòng phải là sans-serif để phù hợp.

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

Browser Support

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

Source

Sử dụng font-style để đặt xem văn bản có nê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

Browser Support

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

Source

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), giá trị từ khoá tương đối (lighter, bolder) và giá trị bằng số (100 đến 900).

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

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

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

Browser Support

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

Source

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

Ngoài các giá trị về độ dài và tỷ lệ phần trăm, font-size còn 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 số giá trị từ khoá tương đối (smaller, larger). Các giá trị tương đối là tương đối so với font-size của phần tử mẹ.

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

Browser Support

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

Source

Sử dụng line-height để chỉ định chiều cao của mỗi 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. Thông thường, bạn nên sử dụng một số thay vì chiều dài 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ự

Browser Support

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

Source

Sử dụng letter-spacing để kiểm soát khoảng cách 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 sẽ tăng khoảng cách tự nhiên giữa các ký tự. Trong bản minh hoạ sau đây, hãy thử chọn một chữ cái để xem kích thước của hộp thư và cách kích thước này thay đổi khi bạn dùng letter-spacing.

Thay đổi khoảng cách giữa các từ

Browser Support

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

Source

Sử dụng word-spacing để tăng hoặc giảm độ dài khoảng cách giữa mỗi 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 độ dài mà bạn chỉ định là cho khoảng trống 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 lối tắt

Bạn có thể 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 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/viết thường cho văn bản

Browser Support

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

Source

Sử dụng [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/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, dấu gạch trên và dấu gạch ngang vào văn bản

Browser Support

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

Source

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

Thuộc tính text-decoration là cách viết tắt cho các thuộc tính cụ thể hơn được trình bày chi tiết ngay sau đây.

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 cho tất cả các thành phần trang trí từ 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ị độ dài và đặt độ rộng nét của tất cả các thành phần trang trí từ text-decoration-line.

Thuộc tính text-decoration là một cách viết tắt cho tất cả các thuộc tính trước đó.

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

Browser Support

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

Source

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 có thể 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

Browser Support

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

Source

Sử dụng text-overflow để chỉ định cách thể hiện nội dung bị ẩn. Có hai lựa 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

Browser Support

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

Source

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 white-space trên MDN.

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

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

Browser Support

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

Source

Sử dụng word-break để thay đổi cách "ngắt" từ khi chúng 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ừ ở từng ký tự nếu cần.

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

Browser Support

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

Source

Sử dụng text-align để chỉ định chế độ căn chỉnh ngang của văn bản trong một khối hoặc phần tử ô trong 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 lần lượt 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 tương ứng với left trong tiếng Anh và right trong chữ viết Ả Rập (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 của chúng tôi.

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à cạnh phải của khối.

Kiểm soát cách xuống dòng tự động

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Source

Sử dụng text-wrap để thay đổi cách văn bản trong một phần tử được xuống dòng.

Các từ khoá được chấp nhận cho thuộc tính này bao gồm wrap, nowrap, balance và stable. Giá trị mặc định là wrap, giúp giảm thiểu tình trạng tràn bằng cách xuống dòng văn bản trên các dòng dọc theo khoảng trắng thông thường và dấu ngắt từ.

Bạn có thể dùng từ khoá nowrap để đạt được kết quả hoàn toàn ngược lại và ngăn văn bản bị ngắt dòng, điều này có thể gây ra tình trạng tràn.

Để có cùng một lượng văn bản trên mỗi dòng khi bạn viết tiêu đề hoặc dòng tiêu đề, hãy sử dụng từ khoá balance. Để cải thiện hiệu suất, các trình duyệt sẽ chỉ áp dụng giá trị này cho các phần tử có tối đa 6 dòng văn bản.

Từ khoá stable hoạt động tương tự như wrap nhưng được dùng với văn bản contenteditable. Khi bạn đặt text-wrap: stable, các dòng phía trên nội dung đang được chỉnh sửa sẽ không bị dịch chuyển trong quá trình này.

Đôi khi, các chuỗi dài không có điểm ngắt rõ ràng có thể tràn ra ngoài vùng chứa. Để kiểm soát cách ngắt dòng văn bản này, hãy dùng overflow-wrap.

Browser Support

  • Chrome: 23.
  • Edge: 18.
  • Firefox: 49.
  • Safari: 7.

Source

Bạn có thể sử dụng các từ khoá normal, break-word và anywhere cho thuộc tính này. Chế độ cài đặt mặc định là normal và sẽ không ngắt văn bản sang dòng tiếp theo, trừ phi văn bản có chứa dấu cách hoặc điểm ngắt tự nhiên.

Các giá trị anywhere và break-word sẽ thêm điểm ngắt ở bất kỳ vị trí nào bên trong chuỗi để ngăn tràn. Các từ khoá khác nhau về cách chúng phản hồi kích thước min-content nội tại hoặc rõ ràng. Từ khoá anywhere cho phép tất cả các cơ hội ngắt dòng mềm có thể. Giá trị break-word không có và sẽ làm cho văn bản dài bằng từ dài nhất.

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

Browser Support

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

Source

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

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

Browser Support

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

Source

Sử dụng writing-mode để thay đổi cách văn bản hiển thị và được sắp xếp. 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 hiển thị theo chiều ngang.

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

Browser Support

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

Source

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ỉ liên quan khi bạn đặt writing-mode thành một giá trị khác ngoài horizontal-tb.

Thêm bóng cho văn bản

Browser Support

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

Source

Sử dụng biểu tượng text-shadow để thêm bóng cho văn bản. Thuộc tính này dự kiến có 3 độ dài (x-offset, y-offset và blur-radius) và một màu.

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

Phông chữ biến đổi

Thông thường, các 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ữ, chẳng hạn như đậm, nghiêng hoặc cô đọng. Phông chữ biến đổi là phông chữ có thể chứa nhiều biến thể khác nhau của một kiểu chữ trong một tệp.

Roboto Flex với nhiều tổ hợp ngẫu nhiên về Chiều rộng và Độ đậm

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

Phần tử giả

Các phần tử giả ::first-letter và ::first-line

Browser Support

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

Source

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

Phần tử giả ::selection

Browser Support

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

Source

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

Browser Support

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

Source

Thuộc tính font-variant là một thuộc tính viết tắt cho 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à thuộc tính 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 của bạn

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

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

serif
Chính xác!
monospace
Chính xác!
italic
Hãy thử lại. italic là một từ khoá hợp lệ cho font-style, chứ không phải font-family.
sci-fi
Hãy thử lại. Tuy nhiên, fantasy là một 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à một từ khoá chung chung, mà là một bộ phông chữ cụ thể.

Câu lệnh nào được 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 hướng xoay của các chữ cái trong một dòng.
Sai
Chính xác! text-orientation thay đổi hướng 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 lựa chọn khác!).

Bạn có thể 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 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à một 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