สอนทำเว็บขั้นพื้นฐานCSS
(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 ที่ต้องการก็ได้
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
(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.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;
}
(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 ออกมาแล้ว
ลืมอัพโหลดไฟล์ หรือ อัพโหลดไฟล์ไว้ผิดไดเรคทอรี่ (หรือ พาธ)
พิมพ์ไวยากรณ์ @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;
}
ลืมสร้าง Class หรือ เขียนไวยากรณ์ใน Class ผิด
font-family:Conv_thaisanslite_r1;
font-size: 28px;
}
ลืมเรียกใช้ Class หรือ เรียกชื่อ Class ผิด
< div calss="font_article" > - อันนี้ผิดเพราะพิมพ์คำว่า calss
ลืมเรียกใช้ css หรือ เรียกชื่อ css ผิด
< head >
< link type="text/css" rel="stylesheet" href="ชื่อโฟลเดอร์ (ถ้ามี)/demo.css" />
< /head >
เขียน css ผิดรูปแบบ
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;
}
< style >
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-family:Conv_thaisanslite_r1;
font-size: 28px;
}
< body >
< /body >
< /html>
