บทที่ 5 CSS3 fonts ตอน 2
การใช้งาน font ที่แปลงด้วย @font-face เรียบร้อยแล้ว
ตัวอย่าง
<html>
<head>
<style>
@font-face
{ font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9+ */ }
div
{ font-family:myFirstFont; }
</style>
</head>
<body>
<div>
you can learn CSS3 and HTML in www.mindphp.com
</div>
</body>
</html>ผลลัพธ์คือ
คำอธิบาย
ตามตัวอย่าง src: url('/ให้ใส่ URL ของฟอนต์ที่เราอัปโหลแล้ว')
การทำตัวอักษรแบบหนา
ในตัวอย่างด้านล่างนี้เราเพิ่มแบบอักษรแบบหนา (Bold) และใช้คำสั่ง font-weight:bold; โดยมีการใช้แท็ก <b>...</b> กำกับบริเวณตัวอักษรที่ต้องการให้หนากว่าปกติ
ตัวอย่าง
<html>
<head>
<style>
@font-face
{font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9+ */}
@font-face
{font-family: myFirstFont;
src: url('Sansation_Bold.ttf')
,url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;}
div
{font-family:myFirstFont;}
</style>
</head>
<body>
<div>
you can learn CSS3 and HTML in <b>www.mindphp.com</b>
</div>
</body>
</html>ผลลัพธ์ที่ได้คือ
อ่านเพิ่มเติม
ข้อมูลอ้างอิง
http://www.fontsquirrel.com
http://www.wecraftweb.com
http://www.w3schools.com
