บังคับเว็บบราวเซอร์ให้แสดงฟอนต์ตัวอักษรไทย (Thai Font) ด้วย CSS3 ฉบับทำจริง ทดสอบจริง

ด้วยความสามารถของ CSS3 ช่วยให้เว็บมาสเตอร์กำหนดให้บราวเซอร์แสดงผลตัวอักษรภาษาไทยตามที่ใจต้องการได้ครับ ดูตัวอย่างหัวเรื่องบทความด้านบนของหน้านี้ได้เลยครับ :) ทดสอบผ่านแล้วบนบราวเซอร์เด่นดังของโลก ดังต่อไปนี้ (ตรวจสอบล่าสุดวันที่ 3 พฤศจิกายน 2555)

- FireFox 16.0.2
- Chrome 22.0.1
- Internet Explorer 9.0.8
- Safari 5.1.7
- Opera 12.02
- Maxthon 3.4.5

ภาพรวมการทำงาน

นำฟอนต์ภาษาไทยที่ต้องการใช้บนเว็บไซต์ อัพโหลดขึ้นไปฟรีที่ http://font2web.com/ รอสักครู่ครับ จะได้รับกลับคืนมาเป็นไฟล์ฟอนต์ที่แปลงใหม่ หลังจากนั้นเพิ่มบรรทัด CSS ลงไปในหน้าเว็บเพจที่ต้องการแสดงผล อัพโหลดไฟล์ขึ้นไว้ที่เว็บเซิร์ฟเวอร์ ก็ถือว่าเสร็จขั้นตอนครับ

ขั้นตอนโดยละเอียด

(1) ผมเข้าเว็บไซต์ http://font2web.com/ กดปุ่มเรียกดูบนหน้าเว็บ จะแสดงหน้าต่างขึ้นมาเพื่อให้เราระบุฟอนต์ เมื่อระบุเสร็จแล้ว, ให้คลิ๊กปุ่ม Convert&Download, รอสักครู่ครับ จะแสดงหน้าต่างให้เราดาวโหลดฟอนต์ที่เราระบุกลับคืนมาเก็บไว้บนเครื่องของ เรา (ผมเลือกใช้ฟอนต์ Supermarket ซึ่งดาวโหลดฟอนต์ไทยแบบลิขสิทธิ์ได้ฟรีที่ f0nt.com)

(ภาพประกอบที่ 1)
ปุ่มกดเพื่อแปลงฟอนต์และดาวโหลดบนเว็บ font2web.com

(2) ทำการแตกไฟล์ที่เพิ่งดาวโหลดมาไว้ที่ไหนก็ได้ในเครื่องของคุณซึ่งจะได้ Folder ดังรูปนี้

(ภาพประกอบที่ 2)
เมื่อแตกไฟล์ที่ดาวโหลดกลับมาจะเห็นไฟล์และโฟลเดอร์ fonts

โอเค, พักเรื่องนี้ไว้ตรงนี้ แล้วกลับมาดูว่าผมกำหนดโครงสร้าง folder เว็บไซต์ของผมไว้อย่างนี้
(2.1) www.naitam.com/article/index.php (ไฟล์เว็บเพจที่มีข้อความที่ต้องการแสดงผลด้วยฟอนต์ supermarket)
(2.2) www.naitam.com/fonts/ (เก็บฟอนต์ supermarket ทั้ง 5 รูปแบบที่ดาวโหลดมาจากเว็บ font2web.com)
(2.3) www.naitam.com/css/fonts.css (เก็บไฟล์ css ที่อ้างอิงตำแหน่งฟอนต์ supermarket)

เมื่อเข้าใจเรื่องโครงสร้างเว็บไซต์ตรงกันแล้ว ผมกลับมาที่ folder ที่เราเพิ่งแตกไฟล์ออกมาเปิดไฟล์ที่ชื่อ fonts.css ที่เห็นในภาพประกอบที่2 (ไฟล์มีไอคอนรูปเฟืองอยู่ข้างหน้า) จะพบโค้ด css ไว้ดังนี้

@font-face {
    font-family: 'Conv_supermarket';
    src: url('../fonts/supermarket.eot');
    src: local('☺'), url('../fonts/supermarket.woff') format('woff'), url('../fonts/supermarket.ttf') format('truetype'), url('../fonts/supermarket.svg') format('svg');
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
}

ระวัง 2 จุด !!
2.4 ในบรรทัดที่สอง font-family: 'Conv_supermarket'; อย่าเปลี่ยนแปลงอะไรจากต้นฉบับที่ดาวโหลดมาจากเว็บไซต์ font2web.com โดยเด็ดขาด มันกำหนดมาอย่างไรให้ใส่ไปอย่างนั้นครับ

2.5 ในบรรทัดที่สามและสี่ src: url('../fonts/supermarket.eot'); ให้คุณแก้ไข path ในวงเล็บให้อ้างอิงถึงฟอนต์ให้ถูกต้องด้วย และต้องแก้ไขทุกวงเล็บครับ

ผมแก้ไขเสร็จแล้วบันทึกเป็นชื่อ fonts.css ตามโครงสร้างของเว็บไซต์ (ดูข้อ 2.3)

(3) ผมเปิดไฟล์ index.php (หรือไฟล์ไหนก็ตามที่คุณต้องการให้แสดงผลฟอนต์ supermarket) และจะเพิ่มบรรทัดต่อไปนี้ระหว่างแทค

..

ดังนี้ครับ

โดยอธิบายได้ดังนี้
(3.1) การอ้างอิงตำแหน่งฟอนต์ supermarket ที่เราเก็บไว็บนเซิร์ฟเวอร์ ด้วยบรรทัด

(3.2) กำหนด CSS บังคับให้บราวเซอร์แสดงผลด้วยฟอนต์ Conv_supermarket ซึ่งผมจะสร้าง Class ที่ชื่อ topic ขึ้นมาให้สะดวกในการเรียกใช้

(4) ผมจะเรียกใช้งาน Class topic ตรงที่ที่ผมต้องการให้ตัวอักษรแสดงผลด้วยฟอนต์ไทย supermarket ง่ายๆ ด้วยบรรทัด ดังนี้ครับ