การใช้แบบอักษรเป็นส่วนที่ขาดไม่ได้ของการออกแบบเว็บ บ่อยครั้งที่เราต้องการใช้แบบอักษรที่เฉพาะเจาะจงในหน้าเว็บ แต่ตัวอักษรไม่ใช่ตัวอักษรในตัวสำหรับระบบปฏิบัติการกระแสหลักเพื่อให้ผู้ใช้อาจไม่สามารถเห็นการออกแบบที่แท้จริงเมื่อเรียกดูหน้า วิธีที่พบบ่อยที่สุดสำหรับนักออกแบบศิลปะคือการสร้างข้อความที่ต้องการลงในรูปภาพ . ไม่เอื้ออำนวยต่อเว็บไซต์ SEO (เครื่องมือค้นหาหลักจะไม่ใช้เนื้อหาของภาพเป็นปัจจัยที่มีประสิทธิภาพในการตัดสินความเกี่ยวข้องของเนื้อหาเว็บเพจ) มีวิธีการบางอย่างบนอินเทอร์เน็ตที่ใช้เทคโนโลยี SIFR หรือ JavaScript/Flash Hack แต่การใช้งานนั้นยุ่งยากหรือมีข้อบกพร่อง สิ่งที่เราต้องการพูดคุยเกี่ยวกับด้านล่างคือวิธีการฝังตัวอักษรใด ๆ ในหน้าเว็บผ่านแอตทริบิวต์ @font-face ของ CSS
ขั้นตอนแรก
รับรูปแบบไฟล์สามรูปแบบเพื่อใช้แบบอักษรเพื่อให้แน่ใจว่าตัวอักษรสามารถแสดงได้ตามปกติในเบราว์เซอร์กระแสหลัก
.TTF หรือ .OTF เหมาะสำหรับ Firefox 3.5, Safari, Opera
.EOT สำหรับ Internet Explorer 4.0+
.SVG เหมาะสำหรับโครเมี่ยม iPhone
สิ่งที่เราต้องการแก้ไขด้านล่างคือวิธีการรับไฟล์รูปแบบทั้งสามนี้ของแบบอักษรที่แน่นอน โดยทั่วไปเรามีไฟล์รูปแบบบางอย่างสำหรับแบบอักษรที่อยู่ในมือ (หรือพบแล้วที่ไซต์ทรัพยากรการออกแบบ) ซึ่งพบได้บ่อยที่สุดคือไฟล์. ttf ซึ่งเราจำเป็นต้องแปลงเป็นรูปแบบไฟล์สองไฟล์ที่เหลือผ่านรูปแบบไฟล์นี้ การแปลงรูปแบบไฟล์ตัวอักษรสามารถรับได้ผ่านบริการแปลงตัวอักษรออนไลน์ที่จัดทำโดย Fontsquirrel หรือ OnlineFontConverter แนะนำไซต์แรกที่นี่ซึ่งช่วยให้เราสามารถเลือกอักขระที่ต้องการในการสร้างไฟล์ตัวอักษร (ตัวเลือกสุดท้ายของบริการ) ซึ่งลดขนาดของไฟล์ตัวอักษรอย่างมากและทำให้โซลูชันนี้ใช้งานได้จริงมากขึ้น
ขั้นตอนที่ 2
หลังจากได้รับไฟล์ฟอนต์ในสามรูปแบบขั้นตอนต่อไปคือการประกาศตัวอักษรในแผ่นสไตล์และใช้แบบอักษรที่จำเป็น
การประกาศตัวอักษรมีดังนี้:
@font-face {
Font-Family: 'fontnameregular';
src: url ('fontname.eot');
SRC: ท้องถิ่น ('Fontname ปกติ'),
ท้องถิ่น ('fontname'),
url ('fontname.woff') รูปแบบ ('woff')
url ('fontname.ttf') รูปแบบ ('truetype')
url ('fontname.svg#fontname') รูปแบบ ('svg');
-
/* ที่ fontname ถูกแทนที่ด้วยชื่อตัวอักษรของคุณ*/
ใช้แบบอักษรนี้ที่คุณต้องการบนหน้า:
p {ตัวอักษร: 13px fontnameregular, Arial, sans-serif;
h1 {font-family: fontnameregular}
หรือ
<p style = "font-family: fontnameregular"> snuggle ดวงจันทร์ในมือของคุณและกลิ่นหอมของดอกไม้ที่ร่วงหล่นเติมเสื้อผ้าของคุณ </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">
<head>
<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">
@font-face {
FONT-FAMILY: 'HAKUYOXINGSHU7000REGULAL';
SRC: URL ('http://www.blueidea.com/articleimg/2009/12/7263/7000.eot');
SRC: ท้องถิ่น ('Hakuyoxingshu7000 ปกติ'), ท้องถิ่น ('hakuyoxingshu7000'), url ('http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf') รูปแบบ ('truetype') url ('http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000') รูปแบบ ('SVG');
-
#บทกวี{
ขนาดตัวอักษร: 45px;
FONT-FAMILY: HAKUYOXINGSHU7000REGURAL;
TEXT-ALIGN: CENTER;
-
#POEM P {ความสูง: 30px; สายไฟ: 30px;}
</style>
</head>
<body>
<div id = "testdiv">
<H1> โซลูชันที่สมบูรณ์สำหรับการฝังตัวอักษรใด ๆ ในหน้าเว็บ - CSS9.NET </h1>
<h2> เข้าถึงข้อความต้นฉบับ: <a href = "http://css.9 > & nbsp; & nbsp; & nbsp; ติดตามการพัฒนาเว็บ front-end- <a href = "http://css.9.net"> css9.net </a> </h2>
<div id = "บทกวี">
<H3> เมฆเป็นมังสวิรัติ </h3>
<p> มีเพื่อนร่วมชั้นในเมืองหลวงและเราพบกันในศาลามังสวิรัติ </p> <p> ผู้ฟังยังไม่เสร็จ แต่คนที่พูดได้พูดมากแล้ว </p> <p> มีเพื่อนอยู่ทั่วห้องและฉันจะพูดถึงวิทยาศาสตร์แพ่ง </p> <p> ส่งคำเล็ก ๆ ในเซนระวังและอ่อนโยน </p>
</div>
</body>
</html>
[Ctrl+A เคล็ดลับการเลือกทั้งหมด: คุณสามารถแก้ไขรหัสบางอย่างก่อนจากนั้นกด Run]
ตัวอักษรในบทความข้างต้นใช้สคริปต์ที่ใช้ปากกาน้ำพุที่เผยแพร่โดยบล็อกนี้
ดาวน์โหลดซอร์สโค้ดสำหรับตัวอย่างนี้: หน้าเว็บฝังตัวอย่างตัวอย่าง
ข้อความต้นฉบับ: http://css9.net/css-font-face-solution/