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ể sẽ chiếm phần lớn nội dung trên trang web, vì vậy, bạn nên thêm một số kiểu văn bản để trang trí cho trang web đẹp hơn. 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 học phần này, trước tiên, chúng ta sẽ tìm hiểu một số thuộc tính phông chữ CSS cơ bản như font-family
, font-style
, font-weight
và font-size
. Sau đó, chúng ta sẽ tìm hiểu sâu về các thuộc tính ảnh hưởng đến các đoạn văn bản, chẳng hạn như text-indent
và word-spacing
. Mô-đun này kết thúc bằng một số chủ đề nâng cao hơn, chẳng hạn như phông chữ biến đổi và phần tử giả.
Thay đổi phông 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 các bộ phông chữ cụ thể hoặc chung. Bộ phông chữ cụ thể là các chuỗi dấu ngoặc kép, chẳng hạn như “ thiếu thốn”, “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ữ có sẵn đầu tiê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ữ mà bạn ưu tiên. Nói chung, bộ phông chữ chung dự phòng phải tương tự như phông chữ bạn ưu tiên: nếu sử dụng font-family: "Helvetica"
(bộ phông chữ alt-serif), thì phông chữ dự phòng phải là sans-serif
để phù hợp.
Dùng phông chữ in nghiêng và nghiêng
Sử dụng font-style
để đặt văn bản có phải 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
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 giá trị số 400
và 700
.
Từ khoá lighter
và bolder
được tính toán tương ứng so với phần tử mẹ. Xem Ý nghĩa của trọng số tương đối của MDN để biết biểu đồ hữu ích thể hiện cách xác định giá trị này.
Thay đổi cỡ chữ
Sử dụng font-size
để điều khiển 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 các giá trị độ 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 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 mỗi dòng trong phần tử. Thuộc tính này chấp nhận số, thời lượng, tỷ lệ phần trăm hoặc từ khoá normal
. Nói chung, bạn nên sử dụng số thay vì độ dài hoặc 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
.
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ạ bên dưới, hãy thử chọn từng chữ cái để xem kích thước của hòm thư và sự thay đổi của chữ cá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 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ị độ dài như em
, px
và rem
. Xin lưu ý rằng độ dài mà bạn chỉ định là dành cho khoảng cách bổ sung ngoài khoảng cách thông thường. Tức là word-spacing: 0
tương đương với word-spacing: normal
.
Viết tắt 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ể sử dụng là font-family
, font-size
, font-stretch
, font-style
, font-variant
, font-weight
và line-height
.
Bạn có thể xem bài viết của font
của MMDN để biết thông tin cụ thể về cách sắp xếp các tài sản 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, dấu 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 dưới 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 hoặc ngay bên phải văn bản!
Thuộc tính text-decoration
là cách 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í 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 giá trị độ dài bất kỳ và đặt chiều rộng nét của tất cả thành 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 khối văn bản. Thuộc tính này có chiều dài (ví dụ: 10px
, 2em
) hoặc theo tỷ lệ phần trăm chiều rộng của khối chứa.
Xử lý nội dung bị ẩn hoặc tràn màn hình
Sử dụng text-overflow
để chỉ định cách thể hiện nội dung ẩn. Có hai tuỳ chọn: clip
(mặc định) cắt bớt văn bản ở điểm tràn; và ellipsis
(hiển thị dấu ba chấm (...) ở đ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
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 đầu dòng cẩn thận.
Kiểm soát cách ngắt từ
Sử dụng word-break
để thay đổi cách "hỏng" các từ khi chúng tràn dòng. Theo mặc định, trình duyệt sẽ không phân tách các 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 các từ ở từng 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ử ô 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
lần lượt căn chỉnh văn bản theo bên trái và bên phải của khối.
Sử dụng start
và end
để thể hiện vị trí đầu và cuối của 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à tới right
bằng chữ Ả Rập được viết từ phải sang trái (RTL). Chúng là sự sắp xếp 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 ở 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 từ để văn bản nằm ngang hàng 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, mặc định) hoặc rtl
(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ữ đọc 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 luồng và sắp xếp văn bản. Tuỳ chọn 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 writing-mode
được đặt thành giá trị khác không phải là 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 ba độ 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 kiểu chữ khác nhau, ví dụ: đậm, nghiêng hoặc đậm. 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.
Yếu tố giả
Các phần tử giả ::first-letter
và ::first-line
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 phần tử văn bản.
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 (có thể viết tắt 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 mỗi tài sản để biết thêm thông tin chi tiết về cách sử dụng.
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 từ khoá dự phòng chung font-family
?
serif
monospace
italic
italic
là từ khoá hợp lệ cho font-style
, không phải cho font-family
.sci-fi
fantasy
là một phương án dự phòng chung hợp lệ cho font-family
.sans-serif
helvetica
"Helvetica"
không phải là từ khoá chung chung, mà đề cập đến một bộ phông chữ cụ thể.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-capitalize: true;
text-case: capitalize;
text-transform: capitalize;
font-style: capitals;
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.
text-orientation
thay đổi chế độ xoay các chữ cái trong một dòng.text-orientation
thay đổi chế độ xoay 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 tính năng khác!).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?
line-spacing
leading
baseline-distance
line-height
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 văn bản và phông chữ cơ bản của MN.