วิธีฝังฟอนต์ภาษาไทยลงในเว็บไซต์เพื่อแสดงผลตัวอักษรในรูปแบบของเรา

วิธีการฝังฟอนต์ในปัจจุบันนั้นมีหลายแบบ เช่น เทคนิค sIFR3 ซึ่งใช้แฟลชเป็นตัวช่วยแสดงผล, การแปลงไฟล์เป็น eof ฯลฯ   แต่เทคนิคหนึ่งที่ไม่ยากและประยุกต์ใช้งานได้ง่าย คือ การประกาศเป็น id ในไฟล์ css ที่ใช้กำหนดรูปแบบสีสัน,ตาราง,ขนาด ของเว็บไซต์เราเองครับ

เว็บมาสเตอร์จะต้องหาให้เจอว่า ไฟล์ css ของเรา คือ ไฟล์อะไร ?  แล้ว ก็ไปเพิ่มบรรทัดไว้ในไฟล์ css นั้น แล้วก็เรียกแสดงผลด้วยการเรียก id ที่กำหนดค่าเอาไว้  แต่ถ้าหากหาไฟล์ css ไม่เจอ (หรือ ไม่เคยมีมาก่อน) ก็เขียนแทรกไว้ในระหว่างแทก

ของหน้าเว็บเพจนั้น ๆ ก็ได้

#####################################################
##                       ตัวอย่างสำหรับการแทรกไว้ในไฟล์ css       ##
#####################################################

@font-face {
font-family : " อ่านคำอธิบาย (1) ชื่อฟอนต์และนามสกุลฟอนต์";
src : url ("อ่านคำอธิบาย (2) ที่อยู่ของฟอนต์บนเซิร์ฟเวอร์") format("อ่านคำอธิบาย (3) ชนิดของฟอนต์") ;
}

#topic{
font-family: อ่านคำอธิบาย (4) ชื่อฟอนต์เท่านั้น;
font-size: อ่านคำอธิบาย (5) ขนาดของตัวอักษร pt;
}

คำอธิบาย :
(1) ชื่อฟอนต์และนามสกุลฟอนต์
ให้ เปิดดูชื่อฟอนต์ที่เราต้องการนำมาใช้แสดงผลจาก C:WindowsFonts  เช่น ต้องการใช้ฟอนต์ PSL-Kittitada.ttf ก็ให้นำมาใส่ในเครื่องหมาย " " จะได้เป็น  font-family : "PSL-Kittitada.ttf"; 

ทั้ง นี้ ระมัดระวังเรื่องขนาดตัวอักษรใหญ่-เล็ก ของทั้งชื่อและนามสกุลฟอนต์ ต้องตรงกันเป๊ะ ๆ ผิดแม้แต่ตัวอักษรเดียวหน้าเว็บเพจก็จะไม่แสดงผลครับ และ เรื่องลิขสิทธิ์ของฟอนต์ด้วยครับ แนะนำให้ใช้ฟอนต์จาก www.f0nt.com ซึ่งเป็นฟอนต์ภาษาไทยฟรี

(2) ที่อยู่ของฟอนต์บนเซิร์ฟเวอร์
ระบุพาธเ้ต็ม ๆ ลงไปในเครื่องหมาย " " จะได้เป็น  เช่น  src : url ("http://www.mywebsite.com/css/PSL-Kittitada.ttf")

(3) ชนิดของฟอนต์
ชนิดของฟอนต์มีหลายแบบโปรดตรวจสอบชนิดของฟอนต์ให้ถูกต้อง ในที่นี้ คือ truetype  ก็ให้นำมาใส่ในเครื่องหมายหมาย " " จะได้เป็น format("truetype")

(4) ชื่อฟอนต์เท่านั้น
ไม่ต้องใส่นามสกุลลงไปนะครับ เอาแต่ชื่อฟอนต์ที่เราเลือกมาใส่เท่านั้น จะได้เป็น font-family:PSL-Kittitada  (สังเกตว่าไม่มีเครื่องหมาย " " คร่อมนะครับ)

(5) ขนาดของตัวอักษร
พิมพ์เป็นตัวเลขลงไป เช่น 15,22,30 จะได้เป็น font-size: 30pt;

#####################################################
##               ตัวอย่างสำหรับการแทรกไว้ในหน้าเว็บเพจ           ##
#####################################################

ก็ ทำทุกอย่างเหมือนการแทรกไว้ในไฟล์ css แต่ให้ใส่แทค คร่อมไว้เท่านั้น และระมัดระวังว่า ต้องใส้ไว้ในแทค

เท่านั้นนะครับ ตัวอย่างที่ถูกต้องคือดังตัวอย่างนี้ ครับ

นายแทม ดอท คอม - Naitam.com

ข้อความหน้าเว็บไซต์

#####################################################
##   วิธีการเรียกใช้ฟอนต์ในตำแหน่งใดๆของหน้าเว็บเพจ         ##
#####################################################

ใน ที่นี้ ขอใช้แทค