Văn bản (text) là phương thức truyền tải thông tin chủ yếu trên trang web. Định dạng văn bản (text styling) là một nhiệm vụ quan trọng trong thiết kế web. Chúng ta cần khéo léo sử dụng CSS để định dạng cho văn bản vừa đẹp, vừa thu hút nhưng vẫn luôn đảm bảo tính dễ đọc.
CSS cung cấp cho chúng ta một vài thuộc tính giúp định kiểu cho văn bản. Qua đó, giúp cho văn bản của chúng ta dễ dàng truyền tải nội đến người dùng hơn.
Thuộc tính Color
Thuộc tính color quy định màu sắc cho văn bản. Để gán giá trị cho thuộc tính color, các bạn có thể tham khảo bài viết màu sắc trong CSS.
|
1 2 3 |
p { color: red; } |
Font-families
Thuộc tính font-family quy định font chữ cho văn bản.
Web safe fonts
Khi xây dựng giao diện một trang web, tất cả chúng ta đều mong muốn trang web được hiển thị một cách chính xác. Do đó, việc đảm bảo fonts chữ bạn dùng được hỗ trợ trên máy của khách hàng là điều quan trọng.
Web safe fonts là các fonts chữ được cài đặt sẵn trên phần lớn các hệ điều hành phổ biến như Windows, macOS, các bản phân phối Linux, Android và iOS.
Danh sách các fonts chữ này sẽ thay đổi theo thời gian. Tuy nhiên, vào thời điểm hiện tại, theo tìm hiểu của mình thì web safe fonts hiện tại bao gồm:
- Arial
- Courier New
- Georgia
- Times New Roman
- Trebuchet MS (cẩn thận khi sử dụng font này, vì một số hệ điều hành trên di động không hỗ trợ)
- Verdana
Fonts mặc định
CSS định nghĩa 5 loại fonts chữ: serif, sans-serif, monospace, cursive và fantasy. Khi trình duyệt web không thể tìm được font phù hợp với mã CSS của bạn, nó sẽ dựa vào các font mặc định này để hiển thị. Chi tiết hiển thị như thế nào sẽ phụ thuộc vào loại trình duyệt web, hệ điều hành, phiên bản …vv
Để bạn dễ hình dung hơn, mình sẽ mô tả sơ về 5 loại font này.
| serif | Font chữ có các ký tự có phần chân. |
| sans-serif | Font chữ có các ký tự không có phần chân. |
| monospace | Font chữ có tất cả các ký tự có cùng độ rộng. |
| cursive | Font chữ mô phỏng chữ viết tay. |
| fantasy | Font chữ được cách điệu, được dùng để trang trí là chủ yếu. |
Font stacks
Chúng ta không thể đảm bảo tính khả dụng của các fonts chữ vì nhiều lý do. Do đó, chúng ta sẽ cung cấp 1 stack các font chữ như một phương án dự phòng. Dựa vào thứ tự của các fonts trong stack, trình duyệt sẽ ưu tiên lựa chọn font chữ phù hợp để hiển thị.
Đây là một cách khai báo hợp lệ thuộc tính font-family. Tuy nhiên, nếu font ‘Trebuchet MS’ gặp sự cố (file font bị lỗi không thể tải được hay trình duyệt không thể đọc được file font…). Trình duyệt sẽ hiển thị trang web bằng font mặc định.
|
1 2 3 |
p { font-family: "Trebuchet MS"; } |
Để an toàn, chúng ta sẽ gán cho thuộc tính font-family 1 stack chứa các fonts. Trình duyệt sẽ tìm kiếm font ‘Trebuchet MS’. Nếu mọi thứ ổn, font ‘Trebuchet MS’ sẽ được dùng để hiển thị. Nếu có lỗi, trình duyệt sẽ thử lại với font ‘Verdana’. Quy trình này được thực hiện cho tới hết stack. Nhờ đó, tỉ lệ lỗi font sẽ giảm thiểu.
|
1 2 3 |
p { font-family: "Trebuchet MS", Verdana, sans-serif; } |
Ví dụ nhỏ về font-family
Chúng ta có thể kết hợp thuộc tính font-family cùng các thuộc tính khác.
|
1 2 3 4 |
p { color: red; font-family: Helvetica, Arial, sans-serif; } |
Các bạn có thể xem và so sánh cách trình duyệt hiển thị font Helvetica và font mặc định.
Font size
Thuộc tính font-size quy định kích thước của văn bản. Chúng ta có thể sử dụng bất kỳ một đơn vị đo trong CSS để gán giá trị cho thuộc tính font-size.
|
1 2 3 4 5 6 |
p { font-size: 26px; } ul { font-size: 2em; } |
Font style
Thuộc tính font-style quy định kiểu chữ cho văn bản, chúng ta thường sử dụng thuộc tính này để tạo kiểu chữ nghiêng cho một đoạn văn.
|
1 2 3 |
p { font-style: italic; } |
Font weight
Thuộc tính font-weight quy định độ đậm nhạt của văn bản. Thuộc tính font weight có thể nhận một trong những giá trị sau:
- normal, bold, bolder hoặc lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
|
1 2 3 4 5 6 7 8 9 |
h1 { font-weight: lighter; } h2 { font-weight: normal; } h3 { font-weight: bolder; } |
Text transform
Thuộc tính text-transform hỗ trợ biến đổi văn bản thành viết thường, viết hoa hoặc in hoa. Các giá trị của thuộc tính bao gồm:
- capitalize: Viết Hoa
- uppercase: VIẾT IN HOA
- lowercase: viết thường
|
1 2 3 4 5 6 7 8 9 |
h1 { text-transform: uppercase; } h2 { text-transform: capitalize; } h3 { text-transform: lowercase; } |
Text decoration
Thuộc tính text-decoration dùng để trang trí văn bản bằng cách gạch chân, gạch ngang hay gạch phía trên đầu văn bản. Với ba giá trị:
- overline
- line-through
- underline
|
1 2 3 4 5 6 7 8 9 |
h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } |
Text shadow
Chúng ta có thể sử dụng thuộc tính text-shadow để tạo hiệu ứng bóng cho một đoạn văn bản. Cú pháp để sử dụng thuộc tính này:
text-shadow: h-shadow v-shadow blur-radius color
Với:
- h-shadow: vị trí của bóng theo trục Ox, thuộc tính bắt buộc.
- v-shadown: vị trí của bóng theo trục Oy, thuộc tính bắt buộc.
- blur-radius: độ nhòe.
- color: màu sắc của bóng.
|
1 2 3 4 5 6 7 8 9 |
h1 { text-shadow: 2px 2px; } h2 { text-shadow: 4px 4px 6px; } h3 { text-shadow: 4px 4px 6px #ff4400; } |
Text alignment
Thuộc tính text-align được sử dụng để canh chỉnh bố cục văn bản. Thuộc tính này nhận các giá trị tương đối giống phần mềm MS Word.
- left: canh trái
- right: canh phải
- center: canh giữa
- justify: canh đều
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.box { margin-bottom: 20px; border: 1px solid #ccc; padding: 20px; color: #fff; } .red { background-color: #ff4444; text-align: left; } .green { background-color: #00c851; text-align: right; } .blue { background-color: #33b5e5; text-align: center; } .orange { background-color: #ffbb33; text-align: justify; } |
Line height
thuộc tính line-height được sử dụng để canh chỉnh chiều cao của mỗi dòng văn bản. Thuộc tính có thể nhận giá trị là một số thực.
|
1 2 3 |
p { line-height: 1.5; } |
Văn bản có dòng được giãn 1.5 lần so với văn bản hiển thị bình thường.
Letter, word spacing
Chúng ta có 2 thuộc tính letter-spacing và word-spacing để điều chỉnh khoảng cách giữa các ký tự và các từ.
|
1 2 3 4 5 6 |
h2 { word-spacing: 6px; } h3 { letter-spacing: 6px; } |
Một số ví dụ về việc sử dụng hợp lý các thuộc tính
Tham khảo thêm một số thuộc tính hỗ trợ định dạng văn bản
Ngoài ra, chúng ta còn có 1 số thuộc tính CSS khác để định dạng văn bản. Tuy nhiên, những thuộc tính này không phổ biến lắm. Nếu đam mê, các bạn có thể tìm hiểu thêm.
- font-variant
- font-kerning
- font-feature-settings
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-size-adjust
- font-stretch
- text-underline-position
- text-rendering
