มาฝัง font สวยๆ ลงใน web page กันเถอะ

wave
มานพ กองอุ่น 6 ก.ค. 2018, 9:13:34 6,068

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