Tìm hiểu cách sử dụng CSS font-variant thuộc tính sử dụng chữ hoa nhỏ cho văn bản của bạn - và liệu bạn có nên sử dụng chữ hoa nhỏ hay không.
CSS font-variant thuộc tính chỉ định xem văn bản của bạn hiển thị dưới dạng chữ viết hoa thông thường hay phông chữ viết hoa nhỏ. Thuộc tính có ba giá trị:
- bình thường (trường hợp văn bản mặc định)
- kế thừa
- chữ viết hoa nhỏ
Cách sử dụng cơ bản:
.small-caps {
font-variant: small-caps;
}
Trước khi bạn bắt đầu sử dụng font-variant hãy đảm bảo rằng bạn hiểu cái gì, khi nào và cách sử dụng nó đúng cách (nhiều thì không).
Hãy bắt đầu bằng cách xác định sự khác biệt giữa văn bản bình thường và chữ viết hoa nhỏ:
- Viết hoa thông thường, còn được gọi là Chữ hoa đầu câu, có nghĩa là văn bản thông thường giống như câu này, trong đó chữ cái đầu tiên của từ đầu tiên trong câu được viết hoa.
- Chữ hoa nhỏ ngắn chữ in hoa được thiết kế để pha trộn với chữ thường (sử dụng chiều cao x tương tự).
Thật không may, không có nhiều phông chữ web có thực mũ nhỏ.
Nếu bạn đặt bất kỳ văn bản nào của mình thành font-variant: small-caps; bạn sẽ nhận được:
- Chữ hoa nhỏ được thiết kế cẩn thận, đẹp mắt, kết hợp nhuần nhuyễn với văn bản viết hoa / câu thông thường của bạn, như ví dụ bạn đã thấy trước đó 👌
- Chữ viết hoa nhỏ giả do máy tính tạo ra không kết hợp tốt với văn bản viết hoa / câu thông thường của bạn - và khiến bạn trông thiếu chuyên nghiệp 😒
Ví dụ về chữ hoa nhỏ thực sự
Đây là một ví dụ về thực phông chữ hoa nhỏ kết hợp hoàn hảo với chữ hoa / thường:
Lý do nó hoạt động rất tốt trong ví dụ trên là họ phông chữ được sử dụng, Alegreya, cung cấp real mũ nhỏ.
Ví dụ về chữ hoa nhỏ giả mạo
Dưới đây là một ví dụ về phông chữ viết hoa nhỏ giả mạo:
Lưu ý cách những chữ hoa nhỏ này không hòa trộn một cách tự nhiên với chữ hoa văn bản thông thường.
Ví dụ trên cũng đang sử dụng Alegreya, tuy nhiên tôi đã tắt mặt phông chữ Alegreya SC để bạn có thể thấy nó trông như thế nào với phông chữ viết hoa nhỏ giả mạo.
Điều gì quyết định giao diện văn bản của bạn với font-variant: small-caps là liệu kiểu chữ (họ phông chữ) bạn chọn có cung cấp thực nắp nhỏ.
Thật không may, mũ nhỏ thực sự rất hiếm. Vì vậy, trước khi bạn nghĩ đến việc sử dụng font-variant: small-caps trong biểu định kiểu CSS của bạn, hãy làm như sau:
- Nghiên cứu xem kiểu chữ của bạn có những chữ hoa nhỏ thực sự hay không (nếu có thì nó do người thiết kế kiểu chữ chỉ định. Hãy tra cứu.)
- Nếu có, hãy đảm bảo rằng chúng được bật đúng cách.
Nếu không, hãy quên việc sử dụng thuộc tính này.
May mắn thay, font-variant thuộc tính sẽ tự động truy cập các chữ hoa nhỏ trong phông chữ của OpenType nếu chúng tồn tại. Tuy nhiên, bạn vẫn cần nhập chúng vào dự án của mình (giống như bạn nhập các phông chữ khác của mình). Nếu bạn không, font-variant thuộc tính sẽ sử dụng các giới hạn nhỏ rác do máy tính tạo ra làm dự phòng - điều mà bạn không muốn.