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, cho phép bạn nhập phông chữ tuỳ chỉnh vào trang web. Đ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.

Tiếp theo, 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-weightfont-size. Những kiến thức cơ bản này sẽ giúp bạ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-indentword-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ữ.

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

Quy tắc @font-face

Quy tắc tại @font-face CSS là công 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 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")
}

Thuộc tính mô tả

ascent-override
Tuỳ chỉnh chỉ số độ dốc, ảnh hưởng đến khoảng trống phía trên đường cơ sở.
descent-override
Điều chỉnh chỉ số độ dốc, ả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
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 truy cập vào các tính năng phông chữ OpenType.
font-variation-settings
Cung cấp khả năng kiểm soát chi tiết đối với các chế độ cài đặt phông chữ biến.
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()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úp nhà thiết kế thoát 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-facefont-family thường bị nhầm lẫn, nhưng chúng phục vụ các mục đích khác nhau.

Như đã 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 sử dụng trong ứng dụng web. 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ữ

Browser Support

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

Source

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-serifmonospace (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

Browser Support

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

Source

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, italicoblique.

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ị số (100 đến 900).

Từ khoá normalbold tương đương với các giá trị số 400700 tương ứng.

Từ khoá lighterbolder được tính toán tương ứng với phần tử mẹ. Hãy xem phần Ý nghĩa của trọng số tương đối trên 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ị độ dài, tỷ lệ phần trăm và một số giá trị từ khoá.

Ngoài giá trị chiều dài và tỷ lệ 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 số giá trị từ khoá tương đối (smaller, larger). Các giá trị tương đối được tính theo 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. Nhìn chung, bạn nên sử dụng số thay vì độ 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 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, pxrem.

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 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 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, pxrem. Xin lưu ý rằng độ dài bạn chỉ định là dành cho khoảng trắng bổ sung ngoài khoảng trắng 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-weightline-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/viết thường của văn bản

Browser Support

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

Source

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, lowercasecapitalize.

Thêm dấu gạch dưới, gạch trên và 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. Dấu gạch dưới được sử dụng phổ biến nhất, nhưng bạn cũng có thể thêm các đườ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, overlineline-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ả các 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, dashedwavy.

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

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 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 hiển thị 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

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 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ừ

Browser Support

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

Source

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

Browser Support

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

Source

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, justifymatch-parent.

Các giá trị leftright 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 startend để biểu thị vị trí bắt đầu và kết thúc của một dòng văn bản ở chế độ ghi 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

Browser Support

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

Source

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ả ngôn ngữ khác viết từ trái sang phải, hãy sử dụng direction: ltr.

Thay đổi dò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 chảy và 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 chạy theo chiều ngang.

Thay đổi hướng 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à mixedupright. 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

Browser Support

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

Source

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

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 phông chữ khác nhau, chẳng hạn như đậm, 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ể khác nhau của một kiểu chữ trong một tệp.

Roboto Flex trong các tổ hợp ngẫu nhiên của Chiều rộng và Độ đậm

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::first-line

Browser Support

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

Source

Các phần tử giả ::first-letter::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

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ể sử 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à 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-capsslashed-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-ligaturesfont-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 phương án dự phòng chung font-family?

italic
helvetica
sans-serif
sci-fi
monospace
serif

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.

font-style: capitals;
text-capitalize: true;
text-case: capitalize;
text-transform: capitalize;
font-variant: capitalize;

Đú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
Sai

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?

baseline-distance
line-height
line-spacing
leading

Tài nguyên