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ợpurl()
vàlocal()
trongsrc
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ướcurl()
. 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ữ
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
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
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
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
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 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ừ
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
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
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
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
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
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ừ
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
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
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
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
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
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.
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
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à 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
?
italic
sci-fi
serif
sans-serif
helvetica
monospace
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-case: capitalize;
font-variant: capitalize;
text-transform: capitalize;
text-capitalize: true;
font-style: capitals;
Đú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.
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?
leading
line-height
baseline-distance
line-spacing
Tài nguyên
- Bài viết Các phương pháp hay nhất về phông chữ thảo luận về việc nhập phông chữ, kết xuất 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.