Tag: font-family

การเขียน CSS เพื่อเรียกใช้ font ของตนเองที่เตรียมไว้

download_font.htm
download_font.htm

มีโอกาสเขียนเว็บเพจที่ใช้ font ที่เตรียมไว้
ได้ download มา 2 font แล้วเก็บไว้ในห้องหนึ่ง
ชื่อ rsp_thchakrapetch.ttf กับ rsp_alexbrush.ttf
ส่วนแฟ้ม .htm ก็อยู่ในห้องเดียวกัน

มีขั้นตอนดังนี้
1. ประกาศชื่อแฟ้มฟอนต์ และชื่อฟอนต์ที่จะใช้ภายในเว็บเพจ
2. จุดใดจะกำหนดรูปแบบฟอนต์ ก็อ้างอิงที่ประกาศได้เลย
3. ดูจากตัวอย่างก็เข้าใจได้โดยง่าย

http://www.thaiall.com/web2

<body>
<style>
@font-face{
font-family:THChakraPetch;
src: url(‘rsp_thchakrapetch.ttf’);
}
@font-face{
font-family:AlexBrush;
src: url(‘rsp_alexbrush.ttf’);
}
</style>
<p style=”font-family:THChakraPetch;font-size:100px;”>สวัสดี</p>
<p style=”font-family:AlexBrush;font-size:100px;”>hello</p>
<p><a href=”rsp_thchakrapetch.ttf”>rsp_thchakrapetch.ttf</a></p>
<p><a href=”rsp_alexbrush.ttf”>rsp_alexbrush.ttf</a></p>
</body>

 

ดาวน์โหลดฟอนต์ และ code ตัวอย่าง โดย view source ได้เลย
http://www.thaiall.com/web2/download_font.htm

font-face คือ การกำหนดการเรียกใช้ฟอนต์บน CSS ที่เพิ่มช่องทางได้หลากหลาย

ต้องการผลแบบนี้ จะเขียน code อย่างไร
ต้องการผลแบบนี้ จะเขียน code อย่างไร เพราะ world เล็กไปหน่อย

เคยได้คุยกับนักศึกษาเรื่องการกำหนด 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/