ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 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>

ผลลัพธ์ที่ได้คือ

อ่านเพิ่มเติม

บทที่ 5 CSS3 fonts ตอน 1

ข้อมูลอ้างอิง
http://www.fontsquirrel.com
http://www.wecraftweb.com
http://www.w3schools.com

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สรุปการอบรมระบบERP การจัดซื้อและคลังสินค้า
โดย Alisasukkeaw พ 14 ก.พ. 2018 2:13 pm บอร์ด M054 - อลิสา สุขเขียว
4
45
พฤ 15 ก.พ. 2018 6:38 pm โดย Alisasukkeaw
ประเภทของ Mobile Application
โดย Alisasukkeaw พ 14 ก.พ. 2018 12:55 pm บอร์ด Mobile Application Developing- Android, iOS
0
35
พ 14 ก.พ. 2018 12:55 pm โดย Alisasukkeaw
การ์ดจอผมมีอาการผิกปกติ ใครรู้ช่วยดูที่ครับ
โดย nuattawoot พ 14 ก.พ. 2018 12:11 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
32
พ 14 ก.พ. 2018 12:11 pm โดย nuattawoot
MP10 - ประภาพรรณ สนดอน
โดย M029 พ 14 ก.พ. 2018 11:30 am บอร์ด Part-Time
0
5
พ 14 ก.พ. 2018 11:30 am โดย M029
งานประจำวันที่ 14 กุมภาพันธ์ 2561
โดย Alisasukkeaw พ 14 ก.พ. 2018 10:28 am บอร์ด M054 - อลิสา สุขเขียว
1
14
พ 14 ก.พ. 2018 7:30 pm โดย Alisasukkeaw
Me and my Valentine (ฉันและวันวาเลนไทน์ของฉัน)
โดย Before Dong พ 14 ก.พ. 2018 10:25 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
42
พ 14 ก.พ. 2018 10:25 am โดย Before Dong
Mobile Application คืออะไร และมีประโยชน์อย่างไร
โดย Alisasukkeaw อ 13 ก.พ. 2018 6:52 pm บอร์ด Mobile Application Developing- Android, iOS
0
37
อ 13 ก.พ. 2018 6:52 pm โดย Alisasukkeaw
มีคำถามเกี่ยวกับ php ครับ
โดย AePongsak อ 13 ก.พ. 2018 5:46 pm บอร์ด Programming - PHP
7
90
พ 14 ก.พ. 2018 2:55 pm โดย AePongsak
การใช้งาน Python GUI (Tkinter) :Menus (เมนู)
โดย Jom07 อ 13 ก.พ. 2018 4:19 pm บอร์ด Python Knowledge
0
42
อ 13 ก.พ. 2018 4:19 pm โดย Jom07
การใช้งาน Python GUI (Tkinter) :Geometry Manager (ผู้จัดการเรขาคณิต)
โดย Jom07 อ 13 ก.พ. 2018 2:54 pm บอร์ด Python Knowledge
0
39
อ 13 ก.พ. 2018 2:54 pm โดย Jom07
การใช้งาน Python GUI (Tkinter) :Layout Managers (ผู้จัดการเค้าโครง)
โดย Jom07 อ 13 ก.พ. 2018 2:47 pm บอร์ด Python Knowledge
0
29
อ 13 ก.พ. 2018 2:47 pm โดย Jom07
ถอดวิดีโอ ระบบ HR ใน open ERP
โดย Alisasukkeaw อ 13 ก.พ. 2018 1:56 pm บอร์ด M054 - อลิสา สุขเขียว
4
21
อ 13 ก.พ. 2018 6:32 pm โดย Alisasukkeaw
งานประจำวันที่ 13 กุมภาพันธ์ 2561
โดย Alisasukkeaw อ 13 ก.พ. 2018 10:40 am บอร์ด M054 - อลิสา สุขเขียว
2
25
อ 13 ก.พ. 2018 6:53 pm โดย Alisasukkeaw
สอบถามปัญหาหน่อยครับ
โดย Jakkaphat Phatraittikul อ 13 ก.พ. 2018 10:19 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
23
อ 13 ก.พ. 2018 10:19 am โดย Jakkaphat Phatraittikul
แกะ+แมว+นก = เท่าไหร่
โดย Before Dong อ 13 ก.พ. 2018 9:37 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
4
874
อ 20 ก.พ. 2018 9:38 am โดย บุคคลทั่วไป
การใช้งาน Python GUI (Tkinter) :Text Widgets ( วิดเจ็ตข้อความ)
โดย Jom07 จ 12 ก.พ. 2018 6:18 pm บอร์ด Python Knowledge
0
46
จ 12 ก.พ. 2018 6:18 pm โดย Jom07
การใช้งาน Python GUI (Tkinter) :Sliders (สไลด์)
โดย Jom07 จ 12 ก.พ. 2018 5:37 pm บอร์ด Python Knowledge
0
48
จ 12 ก.พ. 2018 5:37 pm โดย Jom07
สรุปรายงาน company Profile
โดย Alisasukkeaw จ 12 ก.พ. 2018 5:27 pm บอร์ด M054 - อลิสา สุขเขียว
0
9
จ 12 ก.พ. 2018 5:27 pm โดย Alisasukkeaw
การใช้งาน Python GUI (Tkinter) :Canvas Widgets ( วิดเจ็ตผ้าใบ)
โดย Jom07 จ 12 ก.พ. 2018 5:13 pm บอร์ด Python Knowledge
0
35
จ 12 ก.พ. 2018 5:13 pm โดย Jom07
การใช้งาน Python GUI (Tkinter) :Entry Widgets ( วิดเจ็ตรายการ)
โดย Jom07 จ 12 ก.พ. 2018 4:42 pm บอร์ด Python Knowledge
0
40
จ 12 ก.พ. 2018 4:42 pm โดย Jom07