Tìm hiểu cách dùng thuộc tính font-variant CSS để dùng chữ small caps cho text — và xem có nên dùng small caps hay không.
Thuộc tính CSS font-variant chỉ định text hiển thị ở dạng bình thường (normal) hay font small-caps. Thuộc tính có ba giá trị:
- normal (dạng text mặc định)
- inherit
- small-caps
Cách dùng cơ bản:
.small-caps { font-variant: small-caps; }Trước khi bắt đầu dùng thuộc tính font-variant, hãy chắc chắn bạn hiểu gì, khi nào, và cách dùng nó đúng (nhiều người không hiểu).
Hãy bắt đầu bằng định nghĩa khác biệt giữa text bình thường và small caps:
- Dạng text bình thường, còn gọi là Sentence case, nghĩa là text thường như câu này, chữ cái đầu của từ đầu tiên trong câu được viết hoa.
- Small caps là chữ cái viết hoa ngắn được thiết kế để hòa quyện với chữ thường (dùng x-height tương tự).
Thật đáng tiếc, không nhiều web font có small caps thật.
Nếu bạn set text bất kỳ thành font-variant: small-caps; bạn sẽ nhận được một trong hai:
- Small caps đẹp, thiết kế tỉ mỉ, hòa quyện mượt mà với text normal/sentence case, như ví dụ bạn thấy trước đó 👌
- Small caps giả do máy tính sinh ra, không hòa quyện tốt với text normal/sentence case — làm bạn trông không chuyên nghiệp 😒
Ví dụ small caps thật
Đây là ví dụ font small caps thật hòa quyện hoàn hảo với normal/sentence case:
Lý do nó hoạt động tốt trong ví dụ trên là font family dùng, Alegreya, cung cấp small caps thật.
Ví dụ small caps giả
Đây là ví dụ font small-caps giả:
Notice how these small caps don't naturally blend in with the regular text case.
Ví dụ trên cũng dùng Alegreya, tuy nhiên tôi tắt font face Alegreya SC để bạn thấy trông như thế nào với small caps giả.
Điều quyết định text trông như thế nào với font-variant: small-caps là typeface (font family) bạn chọn có cung cấp small caps thật hay không.
Thật đáng tiếc, small caps thật rất hiếm. Vì vậy, trước khi nghĩ đến dùng font-variant: small-caps trong CSS stylesheet, hãy làm sau:
- Tìm hiểu xem typeface của bạn có small-caps thật không (nếu có, designer typeface sẽ ghi rõ. Tra cứu.)
- Nếu có, chắc chắn chúng được enable đúng cách.
Nếu không, hãy quên việc dùng thuộc tính này đi.
May mắn thay, thuộc tính font-variant sẽ tự động truy cập OpenType small caps trong font nếu chúng tồn tại. Tuy nhiên, bạn vẫn cần import chúng vào dự án (giống như import font khác). Nếu không, thuộc tính font-variant sẽ dùng small caps giả do máy tính sinh ra làm fallback — thứ bạn không muốn.