ในบทเรียนรู้นี้เรามาเรียนรู้การฝัง 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>
ความคิดเห็น