ในบทเรียนรู้นี้เรามาเรียนรู้การฝัง font ลงใน web page โดยเป็น font หรือ แบบอักษร ที่ไม่มีทั่วไป ให้สามารถแสดงผลกับทุก browser ในทุกๆ เครื่องที่เปิด web page 

สำหรับตัวอย่างนี้จะใช้ font CSChatThai โดยสามารถดาวน์โหลดได้ที่ f0nt.com 

จากนั้นนำ font ที่ได้ไป generate เป็นไฟล์สำหรับนำไปใส่ใน web page ที่เว็บไซต์ https://www.web-font-generator.com/ โดยได้สร้างไว้แล้วสามารถดาวน์โหลดไปใช้งานได้เลยที่ https://www.web-font-generator.com/results?dir=a96461ced54905d7b9564399c44f1f6f โดยกดปุ่ม Download Package

เมื่อดาวน์โหลดมาจะมีไฟล์ต่างๆ ดังนี้

  • CSChatThaiUI.eot
  • CSChatThaiUI.svg
  • CSChatThaiUI.ttf
  • CSChatThaiUI.woff
  • preview.html
  • styles.css

จากนั้นนำไปใส่ใน web page โดยกำหนด css ให้อ้างอิงไปยังไฟล์ต่างๆ ให้ถูกต้อง ตามตัวอย่าง

index.html

<!DOCTYPE html>
<html>
<head>
<title>
CSChatThaiUI
 - Web font preview
</title>
<style type='text/css'>

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

body { font-family: 'CSChatThaiUI' !important; }

</style>
</head>
<body>
<h1>มาฝัง font ใน web page กันเถอะ</h1>
<p>
ก๊วนกฤษณ์ ปัจฉิมนิเทศบอร์ด เห็นด้วยแรงใจเซ็กส์คาสิโน โฮป ท็อปบูตหลวงปู่เอ๋อสต๊อกรีโมต แพตเทิร์นเปราะบางติงต๊อง บริกร ซิตี้โหลน ไอติมพุทโธโค้ชคอปเตอร์ แทงกั๊กไพลินดีไซน์เนอร์โปรเจคท์ฟลอร์ แฟนซีเทเลกราฟแจ็กพ็อตเกจิเรตติ้ง ฟีดแยมโรลไฟแนนซ์ไดเอ็ตเปโซ โลชั่น งั้นคองเกรสเที่ยงคืนพาสตาอึมครึม โชว์รูมโฮลวีตสปิริตบริกรยาวี สหัสวรรษเท็กซ์

</p>

<p>
ดีพาร์ตเมนท์ผลไม้มั้ง พริตตี้วิกอิสรชนไลฟ์ แอ๊บแบ๊วโอเครีเสิร์ชกีวี นินจาแฟลชอีแต๋น เบอร์เกอร์บูติกโปรดิวเซอร์วอร์รูม เดบิตแป๋ว เฟิร์มนางแบบ เทคโนแม่ค้าสปอต พาสตาคาเฟ่แต๋วเสือโคร่งเทคโน แรงดูดแหม็บอาว์ โลชั่นจัมโบ้แอลมอนด์วิภัชภาคจิ๊ก พาร์ มิลค์ปาร์ตี้แครกเกอร์ ลิสต์คอลเล็กชั่นจีดีพีแฟกซ์ฟลอร์ รีโมตตัวเอง มาร์คเห่ยโฮปตุ๊ดสไตล์

</p>

<p>
ไดเอ็ต เฮียโมเดิร์นล้มเหลวพะเรอ ไงช็อควิดีโอจอหงวนโดนัท เทรดเย้วหยวน แซมบ้าริคเตอร์ลีกดิสเครดิต โอยัวะเทป แมนชั่นแจ๊กพอตชาร์ตแล็บวีเจ แมกกาซีนเมาท์กรอบรูปดิกชันนารีเอสเปรสโซ ไฟลท์ซากุระแพทเทิร์นพรีเซ็นเตอร์ชินบัญชร แฟร์ตรวจสอบ แฟนซีหมั่นโถว วาทกรรมลาเต้โลโก้ฟีด แต๋ว หมั่นโถวชาร์ตโค้กชาร์จแชมพู คอนโดมิเนียมฟลอร์ไพลิน เท็กซ์

</p>

<p>
นรีแพทย์ บาลานซ์อุปัทวเหตุคอนโดฮีโร่พาสตา ซาบะนพมาศโฮลวีต รูบิค บาบูนอึมครึมทอร์นาโดแบล็กโลโก้ ฟีดโปรเจ็ค มุมมองว้อยธุหร่ำเบญจมบพิตรสตาร์ท แทกติคพีเรียดออร์แกนมาร์คบูติก แกสโซฮอล์เช็งเม้งวิภัชภาคดีไซน์ โอเลี้ยงเสือโคร่งแฮนด์พริตตี้ซิตี้ เก๊ะโครนาวอลนัต สุริยยาตร ไฟแนนซ์ แบล็คมิวสิคทรู โมเดิร์นเยอบีร่าบ๊อบเทรลเล่อร์จ๊าบ คอนโทรล

</p>

<p>
มิวสิคเปเปอร์รีไซเคิลกาญจนาภิเษกล้มเหลว อาร์ติสต์อุปทานพุดดิ้งเปเปอร์ ฟลุควิลเลจคอนเซปต์ จูนปักขคณนา รามาธิบดี ฟลุคมาร์กเนอะโจ๋ แฟลชทอมเกจิโฟล์ค ช็อปเปอร์วอร์รูมสามแยก แจ๊กเก็ตละตินแฮมเบอร์เกอร์ต้าอ่วย พลาซ่าจ๊าบพาสเจอร์ไรส์คอรัปชั่นไฟลต์ คอลัมนิสต์แจ๊กพ็อตไนน์สะกอมโมเดล แอโรบิค เทรลเลอร์ เบิร์นจุ๊ยเหี่ยวย่นเหมย นพมาศด็อกเตอร์อินดอร์เบอร์รี สงบสุขไฟต์

</p>
</body>
</html>

 

ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com