การใช้แบบอักษรเป็นส่วนสำคัญของการออกแบบเว็บ บ่อยครั้ง เราต้องการใช้แบบอักษรเฉพาะในหน้าเว็บ แต่แบบอักษรดังกล่าวไม่ใช่แบบอักษรในตัวของระบบปฏิบัติการกระแสหลัก ดังนั้นผู้ใช้จึงอาจไม่เห็นการออกแบบที่แท้จริงเมื่อเรียกดูหน้าเว็บ วิธีการทั่วไปที่นักออกแบบงานศิลปะใช้คือการเปลี่ยนข้อความที่ต้องการให้เป็นรูปภาพ ซึ่งมีข้อบกพร่องที่ชัดเจนหลายประการ: 1. ไม่สามารถใช้แบบอักษรในขนาดใหญ่ได้ 2. เนื้อหาของรูปภาพนั้นไม่ใช่เรื่องง่ายที่จะเปรียบเทียบ การใช้ข้อความ 3. การปรับเปลี่ยนแบบอักษรไม่ใช่เรื่องง่ายซึ่งเอื้อต่อการทำ SEO ของเว็บไซต์ (เครื่องมือค้นหากระแสหลักจะไม่ใช้เนื้อหา alt รูปภาพเป็นปัจจัยที่มีประสิทธิผลในการตัดสินความเกี่ยวข้องของเนื้อหาเว็บ) มีวิธีการบางอย่างที่ใช้เทคโนโลยี sIFR หรือการแฮ็กจาวาสคริปต์/แฟลชบนอินเทอร์เน็ต แต่วิธีการเหล่านี้อาจยุ่งยากหรือมีข้อบกพร่องในการนำไปใช้ สิ่งที่ฉันจะพูดถึงต่อไปคือวิธีการฝังแบบอักษรใดๆ ในหน้าเว็บผ่านแอตทริบิวต์ @font-face ของ CSS เท่านั้น
ขั้นตอนแรก
รับรูปแบบไฟล์ทั้งสามของแบบอักษรที่จะใช้และตรวจสอบให้แน่ใจว่าแบบอักษรสามารถแสดงได้ตามปกติในเบราว์เซอร์กระแสหลัก
สิ่งต่อไปที่ต้องแก้ไขคือวิธีรับไฟล์รูปแบบทั้งสามของแบบอักษรบางตัว โดยทั่วไป เรามีไฟล์รูปแบบหนึ่งของฟอนต์อยู่ในมือ (หรือพบมันในไซต์แหล่งข้อมูลการออกแบบ) ไฟล์ที่พบบ่อยที่สุดคือไฟล์ .TTF และเราจำเป็นต้องแปลงรูปแบบไฟล์นี้เป็นอีกสองรูปแบบไฟล์ การแปลงรูปแบบไฟล์ฟอนต์สามารถรับได้ผ่านบริการแปลงฟอนต์ออนไลน์ที่ให้บริการโดยเว็บไซต์ FontsQuirrel หรือ onlinefontconverter ขอแนะนำไซต์แรกที่นี่ ซึ่งช่วยให้เราสามารถเลือกอักขระที่เราต้องการเพื่อสร้างไฟล์ฟอนต์ (ตัวเลือกสุดท้ายในบริการ) ซึ่งจะช่วยลดขนาดของไฟล์ฟอนต์ได้อย่างมากและทำให้โซลูชันนี้ใช้งานได้จริงมากขึ้น
ขั้นตอนที่ 2
หลังจากได้รับไฟล์ฟอนต์ในสามรูปแบบแล้ว ขั้นตอนต่อไปคือการประกาศฟอนต์ในสไตล์ชีตและใช้ฟอนต์ตามที่จำเป็น
การประกาศแบบอักษรมีดังนี้:
@ แบบอักษรหน้า {
ตระกูลแบบอักษร: 'fontNameRegular';
src: url('fontName.eot');
src: ท้องถิ่น ('ชื่อแบบอักษรปกติ'),
ท้องถิ่น ('ชื่อแบบอักษร')
url('fontName.woff') รูปแบบ('woff'),
url('fontName.ttf') รูปแบบ('truetype'),
url('fontName.svg#fontName') รูปแบบ('svg');
-
/*แทนที่ชื่อฟอนต์ด้วยชื่อฟอนต์ของคุณ*/
ใช้แบบอักษรตามที่จำเป็นในหน้า:
p { แบบอักษร: 13px fontNameRegular, Arial, sans-serif;
h1{ตระกูลแบบอักษร: fontNameRegular}
หรือ
ถือพระจันทร์ไว้ในน้ำ กลิ่นดอกไม้ที่ร่วงหล่นอบอวลไปทั่วเสื้อผ้า
นี่คือตัวอย่างสิ่งที่ฉันทำในสองขั้นตอนข้างต้น:
เรียกใช้กล่องรหัส
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<หัว>