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 một 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ể sẽ chiếm phần lớn nội dung trên trang web của bạn, vì vậy, bạn nên thêm một số kiểu để trang trí nổi bật. 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ình 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 cụ thể cho từng đoạn văn bả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 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")
}

Nội dung mô tả

ascent-override

Tuỳ chỉnh chỉ số về độ cao, ảnh hưở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.

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ệ theo chiều ngang được chấp nhận, được chỉ định dưới dạng một giá trị hoặc dải ô duy nhất.

font-style

Xác định kiểu phông chữ, hỗ trợ phạm vi góc cho kiểu xiên.

font-weight

Xác định độ đậm hoặc khoảng độ đậ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à chỉ số của phông chữ.

src

Xác định nguồn phông chữ, dù là trên cục bộ hay từ xa. Đây là giá trị 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ó, chuyển thành tệp phông chữ từ xa làm tệp dự phòng. 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 ký tự nên dùng cho phông chữ này.

Nội dung 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. Việc hàm local() tìm kiếm phông chữ trên thiết bị của người dùng mang lại trải nghiệm liền mạch mà không nhất thiết phụ thuộc vào kết nối Internet.

Loại MIME 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à phông chữ

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 vị trí tải phông chữ xuống, cách hiển thị phông chữ trong quá trình tải (với 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 sẽ khai báo một phông chữ và đặt tên cho phông chữ đó, đồng thời font-family sẽ á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 cần tìm. Sau đó, thuộc tính font-family sẽ áp dụng cho phần tử nội dung, trong đó phông chữ dự phòng là phông chữ "iB" nếu không có "CustomFont".

Thay đổi kiểu chữ

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. Bộ phông chữ cụ thể là các chuỗi được trích dẫn, chẳng hạn như "VLOOKUP", "EB Garamond" hoặc "Times New Roman". Bộ phông chữ chung là các từ khoá như serif, sans-serif và monospace (tìm 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 phòng trường hợp trình duyệt của người dùng không có phông chữ bạn muốn. Nói chung, bộ phông chữ chung dự phòng nên tương tự như phông chữ bạn ưu tiên: nếu sử dụng font-family: "Helvetica" (bộ phông chữ Sans Serif), thì bộ phông chữ dự phòng của bạn nên là sans-serif để khớp.

Dùng phông chữ nghiêng và nghiêng

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

In đậm văn bản

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.

Các 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

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ừ khóa tuyệt đối (xx-small, x-small, small, medium, large, x-large, xx-large) và một vài giá trị từ khóa 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

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ự

Sử dụng letter-spacing để kiểm soát khoảng không gian 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ị độ 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, 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 chữ cái thay đổi với letter-spacing.

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

Sử dụng word-spacing để tăng hoặc giảm độ dài khoảng trống giữa mỗi từ trong văn bản. Thuộc tính này chấp nhận các giá trị độ 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.

Viết tắt của font

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 tham khảo 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

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. Tài sản 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òng chữ gạch đầu và dòng gạch ngang vào văn bản

Sử dụng text-decoration để thêm dòng vào văn bản. Dấu gạch chân thường được sử dụng nhất, nhưng bạn cũng có thể thêm các dòng phía trên văn bản hoặc xuyên qua 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 dưới đâ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 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à thiết lập chiều rộng nét vẽ của tất cả thành phần trang trí trong text-decoration-line.

Thuộc tính text-decoration là cách 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 của bạn

Sử dụng text-indent để thêm phần thụt lề vào khối văn bản của bạn. Thuộc tính này lấy độ 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 bị tràn hoặc bị ẩn

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

Điều khiển khoảng trắng

Thuộc tính white-space 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 về MDN.

white-space: pre có thể hữu ích cho việc hiển thị nghệ thuật 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ừ

Sử dụng word-break để thay đổi cách "hỏng" từ khi chúng tràn dòng. Theo mặc định, trình duyệt sẽ không tách các từ. Việc sử dụng giá trị từ khóa 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ăn chỉnh văn bả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 phần tử khối hoặc ô 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 sẽ căn chỉnh văn bản lần lượt ở 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 một dòng văn bản ở chế độ viết hiện tại. Do đó, start ánh xạ tới left bằng tiếng Anh và đến right trong chữ Ả Rập được viết từ phải sang trái (RTL). Chúng sắp xếp theo 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 tự động sắp xếp văn bản và thay đổi chế độ giãn cách từ để văn bản khớp với cả cạnh trái và cạnh phải của khối.

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

Sử dụng direction để đặt hướng của văn bản, 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 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 luồng văn bả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 di chuyển theo chiều ngang.

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

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

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

Sử dụng text-shadow để thêm bóng cho 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 trong học phần 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, 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à các 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.

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

Phần tử giả

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

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

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

Thuộc tính font-variant là cách 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 trong cú pháp viết tắt này là font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures và font-variant-numeric. Hãy truy cập vào các đường liên kết trên mỗi tài sản để biết thêm thông tin về cách sử dụng.

Kiểm tra kiến thức

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

Tài nguyên

• Các phương pháp hay nhất về phông chữ thảo luận về cách nhập phông chữ, hiển thị phông chữ và các phương pháp hay nhất khác để sử dụng phông chữ trên web.
• Định kiểu phông chữ và văn bản cơ bản cho MDN.