ทำ Font-Face เพื่อแสดงข้อความที่ใช้ Font ของเราเอง โดยฝังฟอนต์ในหน้า Webpage เลย

==< CodeTukYang.Com >==

ทำ Font-Face เพื่อแสดงข้อความที่ใช้ Font ของเราเอง โดยฝังฟอนต์ในหน้า Webpage เลย
ตัวอย่าง

ดูตัวอย่าง คลิ๊กที่นี่ครับ

(ในตัวอย่างข้างบนจะมี 2 Font ในหน้าเว็บเพจเดียวกันนะครับ ลองสังเกตดูดีๆ)
วิธีการทำ

1. ให้ Download ไฟล์ประกอบไปก่อนครับ (ข้างในจะมีตัวอย่างพร้อมคำอธิบายครบเลย)

2. ให้คุณไปหา Font จากเว็บไซต์ไหนก็ได้ (เช่น http://f0nt.com) มาก่อนครับ แต่ต้องนามสกุล .TTF นะครับ

3. เมื่อคลาย Zip มา จะเห็นเป็นไฟล์นามสกุล .TTF ซึ่งเราจะต้องแปลงให้มีนามสกุลเป็น .EOT ดังภาพ โดยเราจะต้องใช้โปรแกรม ttf2eot.exe
(หรือ Download ที่ http://code.google.com/p/ttf2eot/) ที่แนบมาให้ด้วย เป็นตัวแปลงไฟล์ครับ

(ให้นำไฟล์ Font ที่ดาวน์โหลดมาไปไว้ในโฟลเดอร์เดียวกับโปรแกรม ttf2eot.exe นะครับ จะได้ง่ายในการแปลงไฟล์)

4. สามารถใช้งานโปรแกรม ttf2eot.exe ได้ผ่าน Command Line โดยไปที่ Start -> Run -> พิมพ์ cmd

5. ให้ใช้คำสั่ง Command ในการเข้าไปยังโฟลเดอร์ที่เก็บโปรแกรม ttf2eot.exe (ใช้ cd พาธของโฟลเดอร์)

6. ใช้คำสั่งด้านล่างในการแปลงไฟล์ .ttf เป็น .eot

ttf2eot.exe fontname.ttf fontname.eot
เมื่อรันคำสั่งนี้แล้ว ก็จะได้ Font ที่เป็นนามสกุล .eot ออกมา

7. แค่นี้ก็จะได้ไฟล์ Font ที่พร้อมใช้งานแล้ว 2 อัน (ที่เป็น .TTF กับ .EOT) ก็สามารถใช้ CSS ดังด้านล่างได้เลยครับ ค่อยๆลองไล่ Code ดูครับ
ผมเขียนอธิบายไว้เป็นส่วนๆแล้ว (ดูตัวอย่างในไฟล์ example.html)

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620">
<title>:: ทำ Font-Face เพื่อแสดงข้อความที่ใช้ Font ของเราเอง โดยฝังฟอนต์ในหน้า Webpage เลย ::</title>

<style>
@font-face {

	font-family: 'iannnnnpdf2008';
  /* ใส่ชื่อ Font */
	src: url('iannnnnpdf2008.eot');
  /* ใส่ URL ที่เก็บไฟล์ Font ที่เป็นนามสกุล .EOT (หลักการเหมือนแทรกรูปภาพธรรมดาๆ ครับ) */
	src: local('myfont'), url('iannnnnpdf2008.ttf') format('truetype');
 /* ใส่ URL ที่เก็บไฟล์ Font ที่เป็นนามสกุล .TTF (หลักการเหมือนแทรกรูปภาพธรรมดาๆ ครับ) */
	font-weight: normal;
	font-style: normal;

}

@font-face {

	font-family: 'oilishi';  /* ใส่ชื่อ Font */
	src: url('oilishi.eot');
  /* ใส่ URL ที่เก็บไฟล์ Font ที่เป็นนามสกุล .EOT (หลักการเหมือนแทรกรูปภาพธรรมดาๆ ครับ) */
	src: local('myfont'), url('oilishi.ttf') format('truetype');
  /* ใส่ URL ที่เก็บไฟล์ Font ที่เป็นนามสกุล .TTF (หลักการเหมือนแทรกรูปภาพธรรมดาๆ ครับ) */
	font-weight: normal;
	font-style: normal;

}

.myfont1
 {

	font-family:'iannnnnpdf2008';
 /* ตั้งชื่อรูปแบบ Font ไว้เรียกใช้งาน */
}
.myfont2
 {

	font-family:'oilishi';
 /* ตั้งชื่อรูปแบบ Font ไว้เรียกใช้งาน */
}
</style>

</head>

<body>

<center><div style="font-size:25px"><u>:: ทำ Font-Face เพื่อแสดงข้อความที่ใช้ Font ของเราเอง โดยฝังฟอนต์ในหน้า Webpage เลย ::</u></div></center>

<br><br>

<u>ข้อความที่ใช้ Font รูปแบบที่ 1</u>
<br><br>

<center>
<div class="myfont1" style="font-size:25px">ยินดีต้อนรับทุกท่านเข้าสู่ <i><font color="blue">CodeTukYang.Com</font></i> ครับ</div>
</center>

<br><br>
<u>ข้อความที่ใช้ Font รูปแบบที่ 2</u>
<br><br>

<center>
<div class="myfont2" style="font-size:60px">Don't cry for someone who doesn't see value in "<b><font color="red">my heart</font></b>"</div>
</center>

<br><br>
<center>
<hr width="75%"><br>
<div style="font-size:25px">เขียน Sourcecode ตัวอย่าง และอธิบายเพิ่มเติม โดย <a href="http://www.codetukyang.com" target="_blank">CodeTukYang.Com</a></div>
<br><hr width="75%"> 
</center>
</body>

</html>

8. แค่นี้ก็เสร็จสิ้นแล้วครับ สามารถใช้งานได้เลยครับ