นายแทม ดอทคอม
 
 วันเสาร์ที่ 3 พฤศจิกายน 2555 เวลา 14:40 น.=

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

พัฒนาแอพและเว็บไซต์ ›› CSS
ผู้เขียน :

คุยกับนายแทม


คำค้น :

บังคับเว็บบราวเซอร์ให้แสดงฟอนต์ตัวอักษรไทย (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)

http://font2web.com/img/fontconverter.gif
(ภาพประกอบที่ 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) และจะเพิ่มบรรทัดต่อไปนี้ระหว่างแทค <head> .. </head> ดังนี้ครับ

<head>
<link rel="stylesheet" href="http://www.naitam.com/css/fonts.css" type="text/css" charset="windows-874" />
<style type="text/css">
    .topic
    {
        font-family:'Conv_supermarket',Sans-Serif;
        margin:5px auto;
        text-align:left;
        padding:2px;
    }
</style>

</head>

โดยอธิบายได้ดังนี้
(3.1) การอ้างอิงตำแหน่งฟอนต์ supermarket ที่เราเก็บไว็บนเซิร์ฟเวอร์ ด้วยบรรทัด
<link rel="stylesheet" href="http://www.naitam.com/css/fonts.css" type="text/css" charset="windows-874" />

(3.2) กำหนด CSS บังคับให้บราวเซอร์แสดงผลด้วยฟอนต์ Conv_supermarket ซึ่งผมจะสร้าง Class ที่ชื่อ topic ขึ้นมาให้สะดวกในการเรียกใช้
<style type="text/css">
    .topic
    {
        font-family:'Conv_supermarket',Sans-Serif;
        margin:5px auto;
        text-align:left;
        padding:2px;
    }
</style>




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

<div class="topic" style="font-size:30px;">ข้อความที่ต้องการแสดงผล<div>

โดยที่สามารถปรับแต่งขนาดตัวอักษรได้จากบรรทัดตัวอย่างเป็นขนาด 30px ก็เพิ่มขนาดเป็น 60px ได้ครับ

 

(5) บันทึกไฟล์ทุกอย่าง และอัพโหลดไฟล์ทุกอย่างไปไว้ตามโครงสร้างเว็บไซต์ 2.1 และ 2.3 (ยกเว้นข้อ 2.2 นั้นให้อัพโหลดเฉพาะ folder ที่ชื่อ fonts ไปไว้บนเว็บเซร์ฟเวอร์ก็พอ ตรวจดูในโฟลเดอร์ fonts ด้วยว่ามีฟอนต์ supermarket ครบ 5 รูปแบบหรือไม่)

 

 

 

ทำไมฟอนต์ไม่แสดงผล ?


- ตรวจสอบการเรียกใช้ Path ของฟอนต์ รวมถึงไฟล์ CSS ไม่ถูกต้อง วิธีการแก้ไข คือ ให้ลองสร้างโฟลเดอร์แบบตัวอย่าง เพื่อให้เห็นภาพก่อนว่าแสดงผลได้จริง ๆ แล้วนำไปประยุกต์ปรับแก้กับระบบโครงสร้างเว็บไซต์ของคุณอีกครั้งครับ

- ตรวจสอบที่โค้ดในข้อที่ 4.1 และ 4.2 ว่าพิมพ์อักขระถูกต้องหรือไม่ ?

- ตรวจสอบที่โค้ดในไฟล์ font.css ว่าสะกดอักขระ , ระบุชื่อฟอนต์ , ระบุ Path ถูกต้องหรือไม่ ?

- ตรวจดูว่าอัพโหลดโฟลเดอร์ www.naitam.com/fonts/ (เก็บฟอนต์ supermarket ทั้ง 5 รูปแบบที่ดาวโหลดมาจากเว็บ font2web.com) ไว้หรือยัง ?


หมวดหลัก
พัฒนาแอพและเว็บไซต์


หมวดย่อย
 
นายแทม นายแทม ดอทคอม ™ 2007 - 2020
อนุญาตให้คัดลอกเนื้อหา ยกเว้นเพื่อการค้า

 นายแทม ดอทคอม |  นายแทม ดอทคอม
 นายแทม ดอทคอม |  @naitam

โดย ห้างหุ้นส่วนสามัญ นายแทม เว็บดีไซน์
ปณจ. 26 หางดง เชียงใหม่ 50230
052-081830