ด้วย font-style คุณสมบัติ CSS เราสามารถจัดรูปแบบฟอนต์ของเราด้วยชุดของลักษณะเฉพาะเพื่อเน้นข้อความของเรา
เช่นเคย ชำระเงิน Codepen ของฉันเพื่อให้คุณสามารถเขียนโค้ดร่วมกับฉันได้
รูปแบบตัวอักษร ไวยากรณ์และตัวเลือก
เรามีตัวเลือกดังต่อไปนี้เมื่อใช้ font-style . หมายเหตุ ทั้งหมดถูกระบุเป็นคีย์เวิร์ด
font-style: normal; font-style: italic; font-style: oblique 30deg; font-style: oblique;
Font-style ยังรองรับคำสำคัญที่ใช้กันทั่วไปในสไตล์ global
/* inherit from parent element */ font-style: inherit; /* browser's default */ font-style: initial; /* inherit if parent value, else initial */ font-style: unset;
ปกติเกี่ยวข้องกับฟอนต์ปกติภายใน font-family ที่คุณระบุ .
ด้วยความเอียง เราสามารถเลือกระบุมุมได้ (-90 ถึง 90) และหากไม่มีการระบุมุม ค่าดีฟอลต์จะเป็น 14
โปรดทราบว่าตัวเอียงและตัวเอียงใช้แทนกันได้ . ทั้งนี้เป็นเพราะรองรับเบราว์เซอร์ และหากคุณใช้แบบอักษรพิเศษและหากเบราว์เซอร์ไม่พบหรือไม่รองรับตัวเอียงจะใช้ตัวเอียงเป็นต้น
ก่อนใช้ oblique ให้ตรวจสอบว่าเบราว์เซอร์ของคุณรองรับคีย์เวิร์ดแบบเฉียงหรือไม่
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
เมื่อคำนึงถึงเรื่องนี้แล้ว มาเน้นที่ชื่อ h1 ของเรากัน:
h1.title {
font-family: 'Tangerine';
font-style: normal;
} คุณจะสังเกตเห็นว่าเรานำเข้าแบบอักษร Tangerine จากแบบอักษรของ Google ได้อย่างไร รูปแบบปกติของแบบอักษรนี้เป็นตัวสะกดจึงแสดงออกมาเช่นนั้น
สำหรับแบบอักษรเฉพาะนี้ การทำให้เป็นแบบตัวสะกดจะเอียงมากขึ้น เราจึงไม่อยากใช้
การใช้งานหลักของ รูปแบบตัวอักษร
ในกรณีส่วนใหญ่ การใช้คำหลักปกติจะซ้ำซาก ดังนั้นการใช้งานหลักของ font-style คุณสมบัติคือการทำให้ฟอนต์เป็นตัวเอียงเพื่อเพิ่มการเน้น
เพื่อเพิ่มการเน้นให้กับย่อหน้า เรามาทำให้ตัวเอียงตัวหนึ่ง
p.par {
font-family: 'Indie Flower';
font-style: italic;
} หากคุณตรวจสอบฟอนต์ Indie Flower คุณจะสังเกตเห็นว่าฟอนต์นี้มีเฉพาะรูปแบบปกติ (ปกติ) เท่านั้น ในกรณีนี้ ตัวบราวเซอร์เองก็ทำเอฟเฟกต์ลาดเอียง!
บทสรุป
การใช้ font-style คุณสมบัติเชื่อมโยงอย่างลึกซึ้งกับ font-family . นอกจากนี้ จนกว่าจะมีการสนับสนุนเบราว์เซอร์ที่ดีขึ้นของ oblique คำหลัก การใช้งานหลักของคุณสมบัตินี้คือการเพิ่มการเน้นแบบอักษรโดยทำให้เป็นตัวเอียง
