ตัวอย่าง
<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>
<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>
ผลลัพธ์ที่ได้คือ
0 ความคิดเห็น:
แสดงความคิดเห็น