The CSS Podcast – 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
, 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-weight
và font-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-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ữ.
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ợ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ú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-face
và font-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ữ
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
), giá trị từ khoá tương đối (lighter
, bolder
) và 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ẹ. 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
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
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ự
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 khoảng 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
. 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-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/viết thường 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. 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
, 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ả 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
, 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 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
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ế độ 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
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
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
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 đổ cho văn bản. Thuộc tính này cần có 3 độ dài (x-offset
, y-offset
và blur-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.
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ể 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
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 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.
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
- 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.
- Kiểu văn bản và phông chữ cơ bản của MDN.