บล็อกนี้จะพูดถึงการใช้ CSS @font-face rule
CSS @font-face Rule คืออะไร
กฎ @font-face ใน CSS ถูกใช้เพื่อสร้างฟอนต์แบบกำหนดเองสำหรับโครงการของเรา สามารถโหลดฟอนต์เหล่านี้ได้จากเซิร์ฟเวอร์หรือฟอนต์ที่ติดตั้งในระบบ
วิธีการใช้ CSS @font-face กฎ?
ไวยากรณ์ในการใช้กฎ CSS @font-face ระบุไว้ด้านล่าง:
@font-face {
ครอบครัวแบบอักษร : MyNewFont ;
src : URL ( )
}
กฎ @font-face ถูกกำหนดโดยการระบุค่าในคุณสมบัติ font-family และ URL ที่เกี่ยวข้องซึ่งฟอนต์นี้ตั้งอยู่เป็นแอตทริบิวต์ src
ตัวอย่าง
ในตัวอย่างด้านล่าง เราจะปรับแต่งแบบอักษร ในการทำเช่นนั้น ก่อนอื่นให้ดาวน์โหลดฟอนต์จากเบราว์เซอร์และเพิ่มลงในโฟลเดอร์ของโปรเจ็กต์ของคุณ คุณยังสามารถใช้ลิงก์หากคุณใช้ฟอนต์จากเซิร์ฟเวอร์
ขั้นแรก เพิ่มแท็ก
และ จากนั้นปรับใช้เพื่อปรับแต่งฟอนต์สำหรับแต่ละแท็ก ลองใช้สถานการณ์ที่อธิบายไว้ข้างต้นในสามขั้นตอน
ขั้นตอนที่ 1: เพิ่มองค์ประกอบในไฟล์ HTML
ขั้นตอนที่ 1: เพิ่มองค์ประกอบในไฟล์ HTML
ใน HTML ภายในส่วน
ให้เพิ่ม และ เพื่อเพิ่มเนื้อหาที่เกี่ยวข้องกับหน้าเว็บ:
< ชั่วโมง2 > ยินดีต้อนรับสู่ Linuxint! < / ชั่วโมง2 >
< h1 > ยินดีต้อนรับสู่ Linuxint! < / h1 >
ขั้นตอนที่ 2: ระบุ @font-face Rule ใน CSS
< ชั่วโมง2 > ยินดีต้อนรับสู่ Linuxint! < / ชั่วโมง2 >
< h1 > ยินดีต้อนรับสู่ Linuxint! < / h1 >
ขั้นตอนที่ 2: ระบุ @font-face Rule ใน CSS
ในการระบุกฎ คีย์เวิร์ด “ @font-face ” ใช้ใน CSS ภายในวงเล็บปีกกา ให้เพิ่มคุณสมบัติ font-family และเพิ่มชื่อฟอนต์เป็นค่า จากนั้น ใช้คุณสมบัติ src เพื่อระบุเส้นทาง URL ของแบบอักษรที่ดาวน์โหลด:
@font-face {
ครอบครัวแบบอักษร : มายฟอนต์ ;
src : URL ( '/fonts/Batuphat\ Script.otf' ) ;
}
ในทำนองเดียวกัน เราจะเพิ่มบล็อกแบบอักษรที่กำหนดเอง:
@font-face {ครอบครัวแบบอักษร : มายฟอนต์2 ;
src : URL ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
ตอนนี้ ใช้สไตล์กับองค์ประกอบ
และ
องค์ประกอบสไตล์ h2
ชั่วโมง2 {
ครอบครัวแบบอักษร : มายฟอนต์ ;
ขนาดตัวอักษร : 50พิกเซล ;
}
องค์ประกอบสไตล์ h2
ชั่วโมง2 {ครอบครัวแบบอักษร : มายฟอนต์ ;
ขนาดตัวอักษร : 50พิกเซล ;
}
คุณสมบัติที่ใช้กับองค์ประกอบ
อธิบายไว้ด้านล่าง:
- “ ครอบครัวแบบอักษร ” ถูกกำหนดด้วยค่า “ มายฟอนต์ ” ซึ่งเป็นสิ่งที่เราได้ประกาศไว้ในกฎ @font-face
- “ ขนาดตัวอักษร คุณสมบัติ ” กำหนดขนาดของแบบอักษรเป็น 50px
องค์ประกอบสไตล์ h1
h1 {
ครอบครัวแบบอักษร : มายฟอนต์2 ;
ขนาดตัวอักษร : 70px ;
สี : สีน้ำตาล ;
}
ที่นี่ “ สี คุณสมบัติ ” ใช้เพื่อกำหนดสีแบบอักษร
จะเห็นได้จากรูปภาพด้านล่างว่าแท็ก
และ ได้รับการจัดรูปแบบด้วยแบบอักษรที่ประกาศใหม่เรียบร้อยแล้ว:
เราได้จัดทำวิธีการใช้กฎ CSS @font-face
บทสรุป
รูปแบบตัวอักษรมีบทบาทสำคัญในการทำให้แอปพลิเคชันสวยงามน่าดึงดูด ระบบของเรามีรูปแบบฟอนต์ที่จำกัด ในขณะที่นักพัฒนาต้องการฟอนต์ที่แตกต่างกันเพื่อเพิ่มความสวยงามให้กับเว็บแอปของตน ในการดำเนินการดังกล่าว CSS อนุญาตให้เราใช้กฎ @font-face สำหรับการเพิ่มแบบอักษรที่กำหนดเอง บทความนี้ได้สาธิตกฎ @font-face ซึ่งคุณสามารถปรับแต่งรูปแบบตัวอักษรในแอปพลิเคชันของเราได้