วิธีใช้คุณสมบัติตัวแปรแบบอักษร CSS (สำหรับตัวพิมพ์เล็ก)

เรียนรู้วิธีใช้ CSS ตัวแปรแบบอักษร เพื่อใช้ตัวอักษรพิมพ์เล็กสำหรับข้อความของคุณ — และคุณควรใช้ตัวพิมพ์เล็กหรือไม่

CSS font-variant คุณสมบัติระบุว่าข้อความของคุณแสดงเป็นกรณีข้อความปกติหรือแบบอักษรตัวพิมพ์เล็ก คุณสมบัติมีสามค่า:

• ปกติ (ตัวพิมพ์เริ่มต้น)
• สืบทอด
• ตัวพิมพ์เล็ก

การใช้งานพื้นฐาน:

.small-caps {
  font-variant: small-caps;
}

ก่อนที่คุณจะเริ่มใช้ font-variant ทรัพย์สินต้องแน่ใจว่า คุณเข้าใจอะไร เมื่อใด และอย่างไร ถูกต้อง (หลายคนไม่ทำ)

เริ่มต้นด้วยการกำหนดความแตกต่างระหว่างข้อความปกติและตัวพิมพ์เล็ก:

• ตัวพิมพ์ข้อความปกติ หรือที่เรียกว่า Sentence case หมายถึงข้อความปกติเช่นประโยคนี้ โดยที่ตัวอักษรตัวแรกของคำแรกในประโยคเป็นตัวพิมพ์ใหญ่
• ตัวพิมพ์เล็ก สั้น ตัวพิมพ์ใหญ่ออกแบบให้กลมกลืนกับอักษรตัวพิมพ์เล็ก (โดยใช้ความสูง x ใกล้เคียงกัน)

ขออภัย มีแบบอักษรเว็บไม่มากนัก ของจริง ตัวพิมพ์เล็ก

หากคุณตั้งค่าข้อความใดๆ ของคุณเป็น font-variant: small-caps; คุณจะได้รับ:

• ตัวพิมพ์เล็กที่ดูดีและออกแบบมาอย่างพิถีพิถันที่กลมกลืนกับข้อความตัวพิมพ์ปกติ/ประโยคของคุณอย่างราบรื่นเหมือนที่คุณเห็นก่อนหน้านี้👌
• ตัวพิมพ์เล็กที่สร้างด้วยคอมพิวเตอร์ปลอมซึ่งเข้ากันไม่ได้กับข้อความตัวพิมพ์ปกติ/ประโยคของคุณ และทำให้คุณดูไม่เป็นมืออาชีพ 😒

ตัวอย่างตัวพิมพ์เล็กจริง

นี่คือตัวอย่าง ของจริง แบบอักษรตัวพิมพ์เล็กที่กลมกลืนกับตัวพิมพ์เล็ก/ตัวพิมพ์ใหญ่:

เหตุผลที่ใช้งานได้ดีในตัวอย่างข้างต้นคือตระกูลฟอนต์ที่ใช้ Alegreya ให้ ของจริง ตัวพิมพ์เล็ก

ตัวอย่างตัวพิมพ์เล็กปลอม

นี่คือตัวอย่างฟอนต์ตัวพิมพ์เล็กปลอม:

สังเกตว่าตัวพิมพ์เล็กเหล่านี้ไม่กลมกลืนกับตัวพิมพ์ข้อความปกติอย่างเป็นธรรมชาติ

ตัวอย่างด้านบนใช้ Alegreya ด้วย แต่ฉันปิดการใช้งานแบบอักษร Alegreya SC เพื่อให้คุณเห็นว่ามันมีลักษณะอย่างไรด้วยแบบอักษรตัวพิมพ์เล็กปลอม

อะไรเป็นตัวกำหนดลักษณะของข้อความของคุณด้วย font-variant: small-caps คือว่าแบบอักษรของคุณ (ตระกูลแบบอักษร) ที่คุณเลือกให้ ของจริง .หรือไม่ หมวกใบเล็ก.

น่าเสียดายที่ตัวพิมพ์เล็กจริงหายาก ดังนั้นก่อนที่คุณจะคิดจะใช้ font-variant: small-caps ในสไตล์ชีต CSS ของคุณ ให้ทำดังต่อไปนี้:

1. ค้นคว้าว่าแบบอักษรของคุณมีตัวพิมพ์เล็กจริงหรือไม่ (ถ้ามี แสดงว่าแบบอักษรนั้นกำหนดโดยผู้ออกแบบ มองหา)
2. หากมี ตรวจสอบให้แน่ใจว่าเปิดใช้งานอย่างถูกต้อง

มิฉะนั้น ลืมใช้คุณสมบัตินี้

โชคดีที่ font-variant คุณสมบัติจะเข้าถึงตัวพิมพ์เล็ก OpenType ในแบบอักษรโดยอัตโนมัติหากมีอยู่ อย่างไรก็ตาม คุณยังต้องนำเข้ามาไว้ในโปรเจ็กต์ของคุณ (เช่นเดียวกับที่คุณนำเข้าฟอนต์อื่นๆ ของคุณ) หากไม่เป็นเช่นนั้น font-variant คุณสมบัติจะใช้ตัวพิมพ์เล็กขยะที่สร้างโดยคอมพิวเตอร์เป็นตัวสำรอง ซึ่งคุณไม่ต้องการ