การใช้แบบอักษรเป็นส่วนสำคัญของการออกแบบเว็บ บ่อยครั้ง เราต้องการใช้แบบอักษรเฉพาะในหน้าเว็บ แต่แบบอักษรดังกล่าวไม่ใช่แบบอักษรในตัวของระบบปฏิบัติการกระแสหลัก ดังนั้นผู้ใช้จึงอาจไม่เห็นการออกแบบที่แท้จริงเมื่อเรียกดูหน้าเว็บ วิธีการทั่วไปที่นักออกแบบงานศิลปะใช้คือการเปลี่ยนข้อความที่ต้องการให้เป็นรูปภาพ ซึ่งมีข้อบกพร่องที่ชัดเจนหลายประการ: 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}
หรือ
<p style="font-family: fontNameRegular">ถือพระจันทร์ไว้ในน้ำ กลิ่นดอกไม้ที่ร่วงหล่นอบอวลไปทั่วเสื้อผ้า</p>
นี่คือตัวอย่างสิ่งที่ฉันทำในสองขั้นตอนข้างต้น:
เรียกใช้กล่องรหัส
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>โซลูชั่นที่สมบูรณ์สำหรับการฝังแบบอักษรในหน้าเว็บ - CSS9.NET</title>
<link rel="stylesheet" href=" http://www.blueidea.com/articleimg/2009/12/7263/style.css " />
<style type="text/css">
@ แบบอักษรหน้า {
ตระกูลแบบอักษร: 'hakuyoxingshu7000Regular';
src: url('http://www.blueidea.com/articleimg/2009/12/7263/7000.eot');
src: local('hakuyoxingshu7000 Regular'), local('hakuyoxingshu7000'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf') format('truetype'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000') รูปแบบ('svg');
-
#บทกวี{
ขนาดตัวอักษร:45px;
ตระกูลแบบอักษร:hakuyoxingshu7000Regular;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
-
#บทกวี p{height:30px;line-height:30px;}
</สไตล์>
</หัว>
<ร่างกาย>
<div id="testdiv">
<h1>โซลูชั่นที่สมบูรณ์สำหรับการฝังแบบอักษรในหน้าเว็บ - CSS9.NET</h1>
<h2>เยี่ยมชมข้อความต้นฉบับ: <a href=" http://css9.net/css-font-face-solution/">http://css9.net/css-font-face-solution/</a >  ;   ;เน้นการพัฒนาส่วนหน้าของเว็บ - <a href=" http://css9.net">CSS9.NET</a></h2 >
<div id="บทกวี">
<h3>หยุนเว่ยเป็นมังสวิรัติ</h3>
<p>มีเพื่อนร่วมชั้นอยู่ที่ปักกิ่งและเราพบกันที่ร้านอาหารมังสวิรัติ </p><p>ผู้ฟังยังพูดไม่จบ แต่ผู้พูดพูดมากเกินไป </p><p>บ้านนี้เต็มไปด้วยเพื่อนฝูง พูดคุยเกี่ยวกับเหอมิงเก้อย่างอิสระ </p><p>ส่งคำเล็กๆ ในภาษาเซน พูดอย่างระมัดระวังและนุ่มนวล </p>
</div>
</ร่างกาย>
</html>
[Ctrl+A เลือกเคล็ดลับทั้งหมด: คุณสามารถแก้ไขบางส่วนของโค้ดก่อนแล้วจึงกด Run]
แบบอักษรในบทความด้านบนใช้แบบอักษรปากกาที่เปิดตัวก่อนหน้านี้ในบล็อกนี้ หากคุณชอบ คุณสามารถดาวน์โหลดได้
ดาวน์โหลดซอร์สโค้ดสำหรับตัวอย่างนี้: ตัวอย่างแบบอักษร Web Embed
ข้อความต้นฉบับ: http://css9.net/css-font-face-solution/