เคยได้คุยกับนักศึกษาเรื่องการกำหนด font แล้วมีการทดสอบสร้างแฟ้ม .htm
ด้วย Word 2010 โดย save as แบบ Web Page, Filtered
ซึ่งปกติการใช้ font ในการเขียนเว็บเพจ มักเรียกใช้ font ที่ติดตั้งบนเครื่อง client
แต่ใน CSS (Cascading Style Sheets) เราสามารถเรียกใช้ font บน Web server
ได้มีการเพิ่ม @font-face เข้าไปใน specification ของ CSS3
โดยการอ้างอิง Font file สามารถทำได้หลากหลายผ่าน src: url();
ผลการทดสอบใช้กับ Firefox และ Chrome รุ่นใหม่แล้วโอเค
แต่ IE 11 ใช้คุณสมบัตินี้ได้ แต่มีปัญหากับ .otf ส่วน .ttf โอเค
ต.ย. 1
<html><head><title>my font</title><style>
<!–
@font-face{font-family:”WisdomScript”; src: url(‘Wisdom-Script.otf’);}
–>
</style></head><body>
<div style=’font-size:70pt;font-family:”WisdomScript”;’>
Hello world
</div>
</body></html>
ต.ย. 2
<html><head><style>
<!–
@font-face{font-family:”WisdomScript”; src: url(‘Wisdom-Script.otf’);}
body{font-family:”WisdomScript”;}
–>
</style></head><body>
Hello world
</body></html>
ต.ย. 3
<html><head><style>
<!–
@font-face{font-family:”WisdomScript”; src: url(‘Wisdom-Script.otf’);}
@font-face{font-family:”AlexBrush”; src: url(‘AlexBrush-Regular.ttf’);}
body{font-size:72pt;font-family:”arial”;}
–>
</style></head><body>
say “<span style=’font-family:”WisdomScript”;’>Hello</span>
<span style=’font-family:”AlexBrush”;’>world</span>”
</body></html>
ดาวน์โหลดฟอนต์นี้
ที่ https://github.com/codeforamerica/click_that_hood/blob/master/public/fonts/Wisdom-Script.otf
ที่ https://www.fontsquirrel.com/fonts/download/alex-brush
หรืออีกมากมาย
ที่ https://www.fontsquirrel.com/
