CSS – Text Styling (phần 1)

Định dạng văn bản với CSS
Định dạng văn bản với CSS

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.

Xem kết quả.

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.

Để 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.

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.

Các bạn có thể xem và so sánh cách trình duyệt hiển thị font Helveticafont 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.

Xem kết quả.

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.

Xem kết quả.

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

Xem kết quả.

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

Xem kết quả.

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

Xem kết quả.

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.

Xem kết quả.

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

Xem kết quả.

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.

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ừ.

Xem kết quả.

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