นายแทม ดอทคอม
 
 วันเสาร์ที่ 17 มกราคม 2558 เวลา 13:51 น.

อัพเดทเทคนิค @font face วิธีเปลี่ยน font web บน Reponsive Web Design ให้แสดงผลถูกต้อง

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

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


คำค้น :

อัพเดทเทคนิค @font face วิธีเปลี่ยน font web บน Reponsive Web Design ให้แสดงผลถูกต้อง
ภาพรวมการใช้คำสั่ง @font-face กับ Responsive Web

อัพเดทเทคนิคแก้ปัญหา : 13 กุมภาพันธ์ 2015
"หากพบว่า Browser หลัก ๆ คือ Chrome , Safari , Firefox , Opera , Android แสดงผลฟอนต์ ไม่ได้ครบทั้งหมด ผมพบปัญหาว่า มาจาก (1) ตัวฟอนต์ภาษาไทยนั้นเอง ที่ไม่รองรับการแปลงเป็น web font และ/หรือ (2) ตัวเว็บที่ให้บริการ generate font ออกมาเป็น 5 นามสกุล (ttf,eot,woff,woff2,svg) นั้นแปลงฟอนต์ไทยได้ไม่สมบูรณ์ครับ

วิธีแก้ปัญหา (1) ต้องเลือกฟอนต์ใหม่ และ/หรือ (2) ลอง generate หลาย ๆ เว็บครับ

ผมลองใช้ฟอนต์ภาษาไทยตัวเดียวกันแปลงจาก 2 เว็บ คือ font2web.com กับ fontsquirrel.com ปรากฏว่า ฟอนต์ที่ generate จาก font2web.com แสดงผลได้ทุก Browser ครับ"

จากที่ลองใช้มาเหมือนว่า font2web.com จะแปลงฟอนต์ภาษาไทยได้ดีที่สุด แต่ตอนนี้เว็บเจ๊งครับ งงเหมือนกันครับ แต่ถ้าเลือกฟอนต์ได้ถูก ก็สามารถแปลงที่เว็บ http://www.fontsquirrel.com/ ได้ออกมาสมบูรณ์เช่นเดียวกันครับ

 

(1) เตรียมฟอนต์ภาษาไทยที่ต้องการ ( ถ้ายังไม่มีฟอนต์ภาษาไทย สามารถดาวโหลดฟอนต์ภาษาไทยฟรีและถูกลิขสิทธิ์ ได้ที่ลิงค์นี้ครับ --> www.f0nt.com )

(2) นำฟอนต์ภาษาไทยมา convert ให้ ได้ครบ 4 รูปแบบ คือ svg , ttf , wof และ eot ด้วยเครื่องมือออนไลน์ฟรี ศึกษาวิธีการ convert ฟอนต์ภาษาไทยฟรี ได้ที่ลิงค์นี้ครับ -> http://www.naitam.com/m-new/read.php?id=1867&aid=4&bid=22

(3) แทรกบรรทัดคำสั่ง @font-face ลงในไฟล์ .css ที่ใช้อยู่ และ เรียกใช้ไฟล์ .css นั้น ด้วยแทค < link > หรือ จะแทรกตรง ๆ ลงระหว่างแทค < style > ... < /style > ในไฟล์ .html หรือ ไฟล์ .php ที่ต้องการก็ได้

 

บราวเซอร์ที่ผ่านการทดสอบแล้ว (ล่าสุด 17 มกราคม 2558)

Android Jelly Bean 4.1.2 และ Kitkat 4.4.2
- Stock Browser (บราวเซอร์มาตรฐานของแอนดรอยด์)
- Chrome 39.0.2171.93
- Firefox 35.0
- Opera 26.0.1656.87080

iOS 8.1.2
- Safari
- Chrome 39.0.2171.50

Windows 8.1
- Internet Explorer 11.0.15
- Chrome Version 39.0.2171.99 m
- Firefox 35.0

 

แค่ 3 ขั้นตอนในการแทรก code

(1) แทรกคำสั่ง @font-face ลงในไฟล์นามสกุล .css โดยตรง (แนะนำวิธีนี้ครับ) หลังจากนั้นสร้าง Class ที่ชื่อ font_article เพื่อเรียกใช้ @font-face อีกทีครับ

* ในที่นี้ผมใช้ฟอนต์ที่มีชื่อตระกูลว่า Conv_thaisanslite_r1 หลังจาก convert มาแล้ว จะได้ไฟล์มา 4 รูปแบบ คือ eot , woff , ttf , svg และ การแทรก code นั้น ต้องให้บรรทัด @font-face อยู่ก่อน Class ที่ชื่อ font_article *

ตัวอย่างการแทรกคำสั่ง @font-face

        @font-face {
            font-family: 'Conv_thaisanslite_r1';
            src: url('thaisanslite_r1.eot');
            src: url('thaisanslite_r1.eot#iefix') format('embedded-opentype'),  url('thaisanslite_r1.woff') format('woff'), url('thaisanslite_r1.ttf') format('truetype'), url('thaisanslite_r1.svg#Conv_thaisanslite_r1') format('svg');
            font-weight: normal;
            font-style: normal;
        }

        @media screen and (-webkit-min-device-pixel-ratio:0) {
        @font-face {
        font-family: 'Conv_thaisanslite_r1';
        src: url('thaisanslite_r1.svg#Conv_thaisanslite_r1') format('svg');
            }
        }

 

.font_article {

/* ชื่อคลาสเราตั้งเองได้ตามอิสระนะครับ */
        font-family:Conv_thaisanslite_r1;
        font-size: 28px;
    }

 

(2) เรียกใช้ ไฟล์นามสกุล .css ที่หน้าเพจ (เพจที่ต้องการแสดงผลฟอนต์นั้น) ด้วยแทค < link > ซึ่งต้องแทรกไว้ระหว่างแทค < head > และ < /head > เท่านั้นครับ

ตัวอย่างการเรียกใช้ ไฟล์นามสกุล .css ด้วยแทค < link >

< !doctype html >
< head >

< link type="text/css" rel="stylesheet" href="ชื่อโฟลเดอร์ (ถ้ามี)/demo.css" />

< /head >

 

(3) ข้อความไหนในหน้าเพจ ที่เราต้องการให้แสดงผลตามแบบฟอนต์ภาษาไทยที่เราเลือกไว้ ก็ให้ "คลุม" ข้อความนั้น ด้วยแทค < div > หรือ < p > หรือ < font > อันใดอันหนึ่ง และระบุการเรียกใช้ Class โดยแทรกลงไป ดังตัวอย่างครับ

* ทั้ง 3 แทคจะต้องมีแทคปิดของตัวมันเองด้วยเสมอนะครับ คือ < /div>

*

 

ตัวอย่างการเรียกใช้ Class ผ่านแทคต่าง ๆ

< div class="font_article" > ข้อความภาษาไทย < /div>

< p class="font_article" > ข้อความภาษาไทย < /p>

< font class="font_article" > ข้อความภาษาไทย < /font>

 

(4) บันทึกไฟล์ .css และ ไฟล์ .html (หรือ .php) ให้อัพโหลดทั้ง 2 ไฟล์ พร้อมกับ ไฟล์ฟอนต์ที่ convert แล้วจำนวน 4 ไฟล์ ขึ้นไปไว้บนโฮสต์ และ Refresh หน้าเว็บเพจดูครับ

 

สิ่งเล็กน้อย ถ้าผิดพลาด ฟอนต์จะไม่แสดง

พลาดจุดที่ 1 :
ระบุไดเรคทอรี่ (หรือ พาธ) ที่เก็บไฟล์ฟอนต์ไม่ถูกต้อง

สังเกตไวยากรณ์ของ CSS นะครับ

@font-face {
    font-family: 'Conv_thaisanslite_r1';
    src: url('thaisanslite_r1.eot');

...

บรรทัดที่ว่า src: url('thaisanslite_r1.eot'); คือ บรรทัดที่เราต้องระบุไดเรคทอรี่ (หรือ พาธ) ที่เก็บ "ไฟล์ฟอนต์" นั้น ๆ ให้ถูกต้อง

วิธีแก้ปัญหา คือ

1) เก็บไฟล์ฟอนต์ไว้ 'ภายในโฟลเดอร์ (หรือ พาธ)' เดียวกับไฟล์ css
2) ระบุไดเรคทอรี่ โดยใช้ตัวแปร php ช่วย เช่น $_SERVER["script_name"] ฯลฯ

 

พลาดจุดที่ 2 :
ระบุชื่อ "ไฟล์ฟอนต์" ไม่ถูกต้อง หรือ ชื่อ "ตระกูลฟอนต์" ไม่ถูกต้อง

@font-face {
    font-family: 'Conv_thaisanslite_r1';
    src: url('thaisanslite_r1.eot');

...

บรรทัดที่ว่า  font-family: 'Conv_thaisanslite_r1';  คือ บรรทัดที่เราต้องระบุชื่อ "ตระกูลฟอนต์" ให้ถูกต้องครับ ซึ่งหลังจาก convert มาแล้ว ชื่อ "ตระกูลฟอนต์" จะถูกเปลี่ยนโดยอัตโนมัติ โดยถูกเติม Conv_ นำหน้า และ เติม _r1 ลงท้าย

ในที่นี้ชื่อ "ตระกูลฟอนต์" ดั้งเดิม คือ thaisanslite แต่หลังจากเรา convert แล้ว มันจะถูกเปลี่ยนชื่อ "ตระกูลฟอนต์" เป็น Conv_thaisanslite_r1

ในขณะที่ ชื่อ "ไฟล์ฟอนต์" จะไม่มีคำว่า Conv_ นำหน้าชื่อ "ไฟล์ฟอนต์" นะครับ จะเป็น thaisanslite_r1 เท่านั้น ตรงจุดนี้ พลาดกันเยอะครับ หลังจากเอาไฟล์ฟอนต์ ไป convert ออกมาแล้ว

 
 
พลาดจุดที่ 3 :
ลืมอัพโหลดไฟล์ หรือ อัพโหลดไฟล์ไว้ผิดไดเรคทอรี่ (หรือ พาธ)
 
ลืม อัพโหลดไฟล์ฟอนต์ หรือ ไฟล์ .css หรือ ไฟล์ .html ( หรือ .php) อันนี้มีจริงครับ ทำเสร็จ ๆ แล้ว "รีบ" จนลืมอัพโหลดไฟล์ฟอนต์ หรือ อัพโหลดจริง แต่ไม่ตรวจสอบว่า อัพโหลดไปไว้ผิดไดเรคทอรี่ แก้ยังไงฟอนต์ก็ไม่แสดงหรอกครับ
 
 
พลาดจุดที่ 4 :
พิมพ์ไวยากรณ์ @font-face ผิด
 
ถ้า พิมพ์ขาดตกอักขระใดในไวยากรณ์ เช่น ; หรือ , หรือ '  ก็ทำให้ฟอนต์ไม่แสดง และ ปัญหาในกรณีนี้ คือ มันไม่ได้แจ้งข้อผิดพลาดให้เรารู้เสียด้วยสิครับ บางคนก็นั่งมึน ตึง หน้าจอไปหลายวันเลยครับ
 
ดังนั้น คัดลอกโค้ดนี้ไปใช้ได้เลยครับ ตรวจสอบแล้วถูกต้องครับ และ อย่าลืมเปลี่ยน "ชื่อตระกูลฟอนต์" และ "ชื่อไฟล์ฟอนต์" ให้ตรงตามของคุณด้วยนะครับ
 
ตัวอย่างไวยากรณ์ @font-face ที่ถูกต้อง
@font-face {
    font-family: 'Conv_thaisanslite_r1';
    src: url('thaisanslite_r1.eot');
    src: url('thaisanslite_r1.woff') format('woff'), url('thaisanslite_r1.ttf') format('truetype'), url('thaisanslite_r1.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
 
พลาดจุดที่ 5 :
ลืมสร้าง Class หรือ เขียนไวยากรณ์ใน Class ผิด
.font_article  {
/* ชื่อคลาสที่เราตั้งเองได้ */
        font-family:Conv_thaisanslite_r1;
        font-size: 28px;
    }
 
จุดที่มักพลาดในไวยากรณ์นี้ ก็ คือ บรรทัด font-family:Conv_thaisanslite_r1; นี่เองครับ เราต้องระบุ "ชื่อตระกูลฟอนต์" ให้ตรงตาม "ชื่อตระกูลฟอนต์" ที่ระบุใน @font-face นะครับ
 
ไม่ต้องมี #SVG ตามหลังแบบนี้ font-family:Conv_thaisanslite_r1#SVG; แบบนี้ผิดครับ
 
 
 
พลาดจุดที่ 6 :
ลืมเรียกใช้ Class หรือ เรียกชื่อ Class ผิด
 
สร้าง class ชื่อ font_article (การสร้าง Class จะต้องมีจุดนำหน้าชื่อ Class ในไฟล์ css แต่ตอนเรียกใช้ไม่ต้องมีจุดนำหน้าชื่อ Class นั้น ๆ นะครับ) แต่เรียกใช้ผิด
 
ตัวอย่างที่ผิด
< div class=".font_article" > - อันนี้ผิดเพราะมีจุดนำหน้าชื่อ Class

< div calss="font_article" > - อันนี้ผิดเพราะพิมพ์คำว่า calss
 
< div class="font_articel" > - อันนี้ผิดเพราะเรียกชื่อ Class ผิด
 
 
พลาดจุดที่ 7 :
ลืมเรียกใช้ css หรือ เรียกชื่อ css ผิด
 
เรียก ใช้ไดเรคทอรี่ (หรือ พาธ) ของไฟล์ css ไม่ถูกต้อง เช่น เรียกผิดไดเรคทอรี่ , ระบุไดเรคทอรี่ถูก แต่สะกดชื่อไฟล์ผิด ฯลฯ หรือ แม้แต่ลืมระบุแทค < link > ไว้ในเพจนั้น ๆ ดังนั้น ต้องอย่าลืม ระบุโค้ดนี้ลงไปที่ส่วน < head > ด้วย
 

< head >

< link type="text/css" rel="stylesheet" href="ชื่อโฟลเดอร์ (ถ้ามี)/demo.css" />

< /head >

 
 
พลาดจุดที่ 8 :
เขียน css ผิดรูปแบบ
 
อันนี้น่าจะเป็นมือใหม่ที่ผิดพลาดได้ คือ การเรียกใช้ css มี 2 วิธี ดังนี้
 
วิธีที่ 1 :
ถ้าบันทึกคำสั่ง @font-face ไว้เป็นไฟล์ css ไม่ต้อง เริ่ม ต้นบรรทัดด้วยแทคเปิด-ปิด < style > .... < /style > แต่อย่างใด  (คือ ในไฟล์ css นั้น ต้องไม่มีบรรทัดไหนเลย ที่ระบุแทค < style > ไว้)
 
ให้พิมพ์ลงไปแบบนี้ได้เลยครับ แต่สำคัญว่า ให้บันทึกเป็นไฟล์นามสกุล .css ก็พอ
 
หลังจากนั้นเรียกใช้งานไฟล์ CSS ด้วยแทค < link > เท่านั้น (ดูพลาดจุดที่ 7)
 
@font-face {
    font-family: 'Conv_thaisanslite_r1';
    src: url('thaisanslite_r1.eot');
    src: url('thaisanslite_r1.woff') format('woff'), url('thaisanslite_r1.ttf') format('truetype'), url('thaisanslite_r1.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
วิธีที่ 2 :
ถ้าต้องการฝังไว้ในเพจ html หรือ php โดยไม่เรียกใช้งาน ผ่านแทค < link >  ก็มักจะพลาด คือ  ลืมใส่ แทคเปิด-ปิด < style > .... < /style > ซะงั้นครับ
 
ตัวอย่างที่ถูกต้องของการเขียนแบบฝังไว้ในไฟล์ .html คือ
 
< !doctype html >
< head >
   < title > ชื่อเว็บเพจ < /title >

< style >
 
@font-face {
    font-family: 'Conv_thaisanslite_r1';
    src: url('thaisanslite_r1.eot');
    src: url('thaisanslite_r1.woff') format('woff'), url('thaisanslite_r1.ttf') format('truetype'), url('thaisanslite_r1.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
.font_article /* ชื่อคลาสที่เราตั้งเองได้ */
    {
        font-family:Conv_thaisanslite_r1;
        font-size: 28px;
    }
 
< /style>
< /head>

< body >
   < div class="font_article"> บทความภาษาไทย < /div>
< /body >
< /html>
 
 
ไม่ใช่ทุกบราวเซอร์จะแสดงผลได้ถูกต้อง
 
นัก พัฒนาต้องเข้าใจนะครับว่า ปัจจุบันอุปกรณ์พกพานั้น มีบราวเซอร์ทางเลือกมากมายให้ผู้ใช้ดาวโหลดมาได้ ดังนั้น @font-face อาจไม่สนับสนุนโดยบราวเซอร์ทางเลือกนั้น เช่น Maxthon , Spark , Mecury ฯลฯ
 
แต่เราสามารถเขียน Code เก็บ Logs เพื่อหายี่ห้อ Browser ได้ เพื่อนำมาทดสอบผลครับ (ไว้มีเวลาจะมาสอนเขียน Code นี้อีกที)
 
จากที่ผมเก็บ Logs ไว้ ก็พบว่า มี 5% เท่านั้นครับ ที่ใช้ Browser แหวกแนวจากผู้ใช้ส่วนใหญ่
 
ส่วนอีก 95 % ก็ คือ Chrome , FireFox , Internet Explorer , Safari , Opera , Nokia Browser และ Stock Android Browser (เอ๊ะ Black Berry หายไปไหนนะ >_<) ซึ่งเวอร์ชั่นล่าสุดของยี่ห้อบราวเซอร์ที่คนส่วนใหญ่บนโลกใช้ ก็สนับสนุน @font-face หมดแล้วครับ
 
 
บราวเซอร์ที่ใช้ @font-face ได้ ก็แสดงผลไม่เหมือนกัน
 
นักพัฒนายังต้องปวดตับ กับ ความสวยงามของฟอนต์ ที่แต่ละบราวเซอร์แสดงผลอีกด้วย จากที่ผมทดสอบมาพบว่า ฟอนต์ภาษาไทย จาก www.f0nt.com นั้น จะแสดงผลได้สวยงามมากที่สุดบน FireFox และ IE ครับ
 
สำหรับ Chrome นั้นจะมีอาการขอบเส้นหนาไปบ้าง โค้งแตกบ้าง และ สำหรับ Safari นั้น จะหลุดโลกไปมากกว่าเพื่อนครับ เช่น เส้นฟอนต์แตก หรือ สระลอยสูง ส่วน Opera นั้น กลาง ๆ ครับ
 
ผมจึงมักเลือกฟอนต์ที่แสดงผลบน Opera ได้สวยงามไว้ก่อนครับ เพราะเราจะได้ผลลัพธ์ที่สวยงามตรงกัน บน Firefox , IE และ ถ้าโชคดี Chrome ก็จะสวยงามเป๊ะเหมือนกันครับ
 
 
บทสรุป
 
@font-face ถือว่าแก้ปัญหาได้ดีระดับหนึ่งครับ และยังมีทริคอีกเล็กน้อย โดยการสร้าง cookies ด้วย Javascript ร่วมกันกับ PHP ในการกำหนดขนาดฟอนต์ภาษาไทยให้เหมาะสม (ลดปัญหา) บนหน้าจอที่ต่างกันมากมายของผู้ใช้ ทั้งขนาด , ระบบปฏิบัติการ และ ตัวบราวเซอร์เอง
 
เอาไว้มีเวลานะครับ วันนี้เหนื่อยจุง
 
ใครมีคำถาม หรือ คำแนะนำให้ผมปรับเปลี่ยนบทความ หรือ ลองนำไปใช้แล้ว โค้ดไม่ทำงาน สามารถเขียนความเห็นทิ้งไว้ได้ครับ
 

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


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

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

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