วิธีใช้แบบอักษรเว็บ

Sep 14, 2025
วิธีการ

ต่อไปนี้เป็นข้อความที่ตัดตอนมาจากคู่มือการทำงานของ Bram Stein ซื้อที่นี่ .

เว็บแบบอักษร ถูกกำหนดใน CSS ผ่าน @ font-face กฎ. หากคุณเป็นนักพัฒนาเว็บคุณมักจะเขียนคัดลอกและวางหรือที่น้อยที่สุดก็เห็น @ font-face กฎ.

เพื่อความสมบูรณ์ของความสมบูรณ์ลองดำเนินการอย่างรวดเร็วผ่านตัวอย่างพื้นฐาน: 

 @ font-face {
  ตัวอักษรตระกูล: Elena;
  SRC: URL (Elena-armall.woff);
}

สิ่งนี้จะสร้างตระกูลตัวอักษรเว็บใหม่ที่สามารถอ้างอิงผ่าน ตัวอักษรครอบครัว หรือ ตัวอักษร คุณสมบัติชวเลข แต่มีบางอย่างหายไปที่นี่ เมื่ออ้างอิงแบบอักษรเว็บในแบบอักษรสแต็กเสมอให้แน่ใจว่าได้รวมแบบอักษรย้อนกลับอย่างน้อยหนึ่งตัวในกรณีที่เว็บฟอนต์ล้มเหลวในการโหลด

ที่นี่ถ้า Elena ล้มเหลวในการโหลดเบราว์เซอร์จะถอยกลับไปที่ทั่วไป serif ครอบครัวแบบอักษร: 

 p {
  Font-Family: Elena, Serif;
}

มีอีกมากกว่าที่จะล้มตัวอักษร แต่ตอนนี้ให้สแต็คแบบอักษรของเราง่ายๆโดยรวมเพียงทั่วไป serif และ sans-serif ตระกูลตัวอักษร

ตระกูลตัวอักษร

การสร้างตระกูลแบบอักษรที่มีหลายสไตล์สำเร็จโดยการสร้าง @ font-face กฎสำหรับแต่ละสไตล์และใช้เหมือนกัน ตัวอักษรครอบครัว ชื่อ. ดังต่อไปนี้ @ font-face กฎสร้างครอบครัวที่มีสไตล์ปกติและตัวหนา: 

 @ font-face {
     ตัวอักษรตระกูล: Elena;
     SRC: URL (Elena-armall.woff);
     ฟอนต์ - น้ำหนัก: ปกติ;
}
   @ font-face {
     ตัวอักษรตระกูล: Elena;
     SRC: URL (Elena-Bold.woff);
     ฟอนต์ - น้ำหนัก: ตัวหนา;
}

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

 p {
  Font-Family: Elena, Serif;
}

p strong {
  ฟอนต์ - น้ำหนัก: ตัวหนา;
}

นอกจากนี้ ตัวอักษรน้ำหนัก , @ font-face ยังยอมรับ รูปแบบตัวอักษร และ การยืดแบบอักษร อสังหาริมทรัพย์ตัวอธิบายซึ่งกำหนดสไตล์เช่นตัวเอียงและย่อ ตัวบ่งชี้คุณสมบัติทั้งสามสามารถใช้เพื่อสร้างตระกูลตัวอักษรเดียวที่มีหลายสไตล์ ในทางทฤษฎีนี้ช่วยให้คุณสร้างครอบครัวที่มี 243 แต่ละรูปแบบ (เก้า ตัวอักษรน้ำหนัก ค่า×สาม รูปแบบตัวอักษร ค่า×เก้า การยืดแบบอักษร ค่า)

อย่างไรก็ตามในทางปฏิบัติคุณ จำกัด อยู่ที่ 27 ค่าเนื่องจากเบราว์เซอร์บางตัวไม่สนับสนุน การยืดแบบอักษร . ลองดูที่โต๊ะด้านล่างเพื่อดูว่าคุณสามารถใช้เบราว์เซอร์ใดและดู ที่นี่ สำหรับข้อมูลรายละเอียดเพิ่มเติม

Click the icon in the top right to enlarge the image

คลิกที่ไอคอนที่ด้านบนขวาเพื่อขยายภาพ

ด้วยโชคเบราว์เซอร์ที่เหลือจะใช้ การยืดแบบอักษร ในไม่ช้าคุณจะสามารถใช้การจำแนกประเภทแบบอักษร 243 แบบได้

รูปแบบตัวอักษร

ที่ src Descriptor บอกเบราว์เซอร์ที่จะได้รับไฟล์ฟอนต์ ตัวอย่างก่อนหน้านี้ใช้รูปแบบตัวอักษรเดียว แต่คุณมักจะเห็น URL ในรูปแบบตัวอักษรหลายแบบรวมกับคำแนะนำรูปแบบซึ่งต่อท้ายหลังจาก URL โดยใช้ รูปแบบ ("ค่า") ไวยากรณ์

รูปแบบคำแนะนำบอกเบราว์เซอร์ว่ารูปแบบของไฟล์ฟอนต์ที่ URL ที่กำหนดคืออะไร 

 @ font-face {
  ตัวอักษรตระกูล: Elena;
  SRC: รูปแบบ URL (Elena-Region.woff2) ("Woff2")
       รูปแบบ URL (Elena-armall.woff) ("Woff");
}

หากคุณแสดงรายการหลายรูปแบบเบราว์เซอร์ที่ทันสมัยจะเลือกรูปแบบแรกที่พวกเขารองรับตามคำใบ้รูปแบบ ดังนั้นจึงเป็นสิ่งสำคัญในการแสดงรูปแบบตัวอักษรเว็บตามลำดับการบีบอัดที่ดีที่สุดอย่างน้อยที่สุด

แม้ว่ารูปแบบคำแนะนำรูปแบบเป็นตัวเลือกให้รวมไว้เสมอ - พวกเขาปล่อยให้เบราว์เซอร์ทราบเกี่ยวกับรูปแบบโดยไม่จำเป็นต้องดาวน์โหลดแบบอักษร ตัวอย่างเช่นหากเบราว์เซอร์ไม่รองรับ Woff2 แต่รองรับ Woff มันสามารถข้ามไฟล์ฟอนต์ Woff2 ตามคำใบ้รูปแบบ

เบราว์เซอร์รองรับรูปแบบตัวอักษรเว็บหลายรูปแบบ: opentype (trueType), EOT, WOFF และ WOFF2 เบราว์เซอร์บางตัวยังรองรับฟอนต์ SVG แต่พวกเขาเลิกใช้แล้วและไม่ควรใช้อีกต่อไป (และไม่ควรสับสนกับ รูปแบบ opentype-svg ใหม่ .

EOT, WOFF และ WOFF2 เป็นรูปแบบตัวอักษรในทางเทคนิค พวกเขาจะถูกบีบอัดไฟล์ opentype ที่มีการบีบอัดองศาที่แตกต่างกัน Woff2 เสนอการบีบอัดที่ดีที่สุดตามด้วย Woff และ EOT

ในการวิจัยความคุ้มครองสำหรับเบราว์เซอร์ทั้งหมดคุณอาจเจอบางสิ่งที่เรียกว่า กันกระสุน @ font-face ไวยากรณ์ โดย fontspring

ไวยากรณ์ BulletProof ใช้ EOT, WOFF2, Woff, Draw OpenType และ SVG ฟอนต์สำหรับการครอบคลุมเบราว์เซอร์สูงสุด: 

 @ font-face {
  ตัวอักษรตระกูล: Elena;
  SRC: รูปแบบ URL (Elena.eot? #iefix) ("ฝังตัว opentype"),
       รูปแบบ URL (Elena.woff2) ("WOFF2"),
       รูปแบบ URL (Elena.woff) ("Woff"),
       รูปแบบ URL (Elena.OTF) ("opentype"),
       รูปแบบ URL (Elena.svg # Elena) ("SVG");
}

บรรทัด URL แรกอาจดูแปลก ๆ เล็กน้อยสำหรับคุณ เวอร์ชันของ Internet Explorer 8 และด้านล่างไม่รองรับไวยากรณ์สำหรับรูปแบบตัวอักษรหลายรูปแบบและรักษาค่าทั้งหมดของ src ทรัพย์สินเป็น URL

เคล็ดลับไวยากรณ์แบบกระสุน Internet Explorer 8 และต่ำกว่าคิดว่า URL ที่เหลือเป็นส่วนหนึ่งของตัวระบุชิ้นส่วนของ URL แรก เนื่องจากตัวระบุการแยกส่วนจะถูกละเว้นเมื่อดาวน์โหลดไฟล์อินเทอร์เน็ต Explorer 8 และด้านล่างเพียงแค่ใช้ URL แรก

เบราว์เซอร์นอกเหนือจาก Internet Explorer จะข้ามสายเพราะพวกเขาไม่รองรับ EOT

ส่วนที่เหลือของรายการคือสิ่งที่คุณคาดหวัง: รูปแบบตัวอักษรที่ระบุไว้ตามลำดับการตั้งค่า

แต่ไวยากรณ์กระสุนยังคงมีความเกี่ยวข้อง? ไม่ในความเป็นจริงฉันคิดว่ามันเป็นอันตราย ฟอนต์ SVG เลิกใช้แล้วและสนับสนุนโดยเบราว์เซอร์ที่ไม่ได้ใช้งานอีกต่อไป

เว็บไซต์ส่วนใหญ่รองรับ Internet Explorer 9 ขึ้นไป แต่ไวยากรณ์รายการ EOT เป็นรูปแบบตัวอักษรที่ต้องการเป็นครั้งแรก แม้ว่า Internet Explorer 9 และ UP รองรับ Woff แต่รุ่นเหล่านั้นจะยังคงดาวน์โหลดไฟล์ EOT เพียงเพราะมีการระบุไว้ก่อน

เนื่องจากเว็บไซต์ส่วนใหญ่ไม่รองรับเบราว์เซอร์เก่าอีกต่อไปฉันขอแนะนำให้ใช้ไวยากรณ์ที่ง่ายขึ้น ไวยากรณ์ที่ง่ายขึ้นนี้ครอบคลุมเบราว์เซอร์ที่ทันสมัยทั้งหมดรวมถึงรุ่นที่เก่ากว่าเล็กน้อยที่ยังคงใช้งานอยู่เช่น Android 4.4 และก่อนหน้านี้: 

 @ font-face {
  ตัวอักษรตระกูล: Elena;
  SRC: รูปแบบ URL (Elena.woff2) ("WOFF2")
       รูปแบบ URL (Elena.woff) ("Woff"),
       รูปแบบ URL (Elena.OTF) ("opentype");
}

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

 @ font-face {
  ตัวอักษรตระกูล: Elena;
  SRC: รูปแบบ URL (Elena.woff2) ("WOFF2")
       รูปแบบ URL (Elena.woff) ("Woff");
}

ในกรณีนี้ใครบางคนที่ใช้เบราว์เซอร์รุ่นเก่าจะเห็นแบบอักษรที่ตกลงมาแทนที่จะเป็นแบบอักษรเว็บ ไม่เป็นไร; พวกเขายังสามารถอ่านเนื้อหาในฟอนต์ที่ล้มลง

มีค่าที่เป็นไปได้อีกอย่างสำหรับ src descriptor ที่ เกี่ยวกับท้องถิ่น ฟังก์ชั่นใช้ชื่อของตระกูลตัวอักษรท้องถิ่น หากฟอนต์ที่จะติดตั้งในระบบเบราว์เซอร์จะใช้งานแทนแทนที่จะหลีกเลี่ยงการดาวน์โหลดเพิ่มเติม 

 @ font-face {
  ตัวอักษรตระกูล: Elena;
  SRC: ท้องถิ่น ("Elena"),
       รูปแบบ URL (Elena-armall.woff2) ("Woff2")
       รูปแบบ URL (Elena-armall.woff) ("Woff");
}

ในขณะที่นี่อาจดูเหมือนการเพิ่มประสิทธิภาพที่ยอดเยี่ยมไม่มีอะไรรับประกันได้ว่าแบบอักษรท้องถิ่นตรงกับแบบอักษรเว็บของคุณ

คุณอาจได้รับแบบอักษรรุ่นที่แตกต่างกันแบบอักษรที่มีการรองรับภาษาที่แตกต่างกันหรือแม้แต่แบบอักษรที่แตกต่างกันอย่างสิ้นเชิง ด้วยเหตุผลนั้นฉันมักจะแนะนำไม่ใช้ เกี่ยวกับท้องถิ่น ฟังก์ชั่นเว้นแต่คุณจะพบข้อเสียเหล่านี้ยอมรับได้

นี่เป็นข้อความที่ตัดตอนมาจาก Bram Stein's คู่มือการทำงานของ WebFont จากหนังสือออกจากกัน ในนั้นเขาสำรวจสิ่งที่ต้องพิจารณาเมื่อเลือกแบบอักษรเว็บวิธีการใช้งานได้อย่างมีประสิทธิภาพและวิธีการเพิ่มประสิทธิภาพสำหรับประสิทธิภาพ

บทความที่เกี่ยวข้อง:

  • Blockchain คืออะไร
  • 30 ส่วนขยาย Chrome สำหรับนักออกแบบเว็บไซต์และ Devs
  • 20 แบบอักษร Google เว็บฟรีที่น่าตื่นตาตื่นใจฟรี

วิธีการ - บทความยอดนิยม

สร้างพื้นผิวด้วยเครื่องมือตราประทับรูปแบบ

วิธีการ Sep 14, 2025

(เครดิตรูปภาพ: Lino Drighe) หากคุณติดจ้องมองที่ผ้�..

Magic Making Image Magic กับ Houdini

วิธีการ Sep 14, 2025

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ ..

วิธีการเลือกด้วยเครื่องมือ Lasso ของ Photoshop

วิธีการ Sep 14, 2025

การเลือกเป็นหนึ่งในภารกิจที่สำคัญที่สุดที่คุณจะได้เรียนรู้ที่จะ�..

สร้างพื้นผิวที่น่ากลัวด้วยเทคนิคสื่อผสม

วิธีการ Sep 14, 2025

เมื่อฉันเปลี่ยนจากแบบดั้งเดิมเป็นครั้งแรกกั..

วิธีผสม Palette Gouache

วิธีการ Sep 14, 2025

Gouache เป็นการให้อภัยมากกว่าสีสีน้ำ แต่การตัดสิน..

เคล็ดลับยอดนิยมสำหรับการวาดภาพมือแสดง

วิธีการ Sep 14, 2025

มืออาจเป็นองค์ประกอบกายวิภาคที่ยากที่สุดที่..

เร่งการสร้างแบบจำลอง 3 มิติของคุณ

วิธีการ Sep 14, 2025

บทช่วยสอนนี้ครอบคลุมกระบวนการสร้างสินทรัพย์..

เริ่มต้นด้วยการสร้างต้นแบบใน Adobe XD

วิธีการ Sep 14, 2025

ในฐานะที่เป็นความต้องการของผู้เชี่ยวชาญด้านการออกแบบ UX ยังคงเติบโ�..

หมวดหมู่