ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Q อยากทราบวิธีสร้างตัวแปรเก็บค่าที่ได้จาก api
โดย birdkritsna อ 24 ก.ย. 2019 1:31 pm บอร์ด Programming - PHP
1
7
อ 24 ก.ย. 2019 1:44 pm โดย thatsawan
งานประจำวันที่ 24 กันยายน 2562
โดย Patipat อ 24 ก.ย. 2019 10:20 am บอร์ด M088 - ปฏิภัทร สารธรรม
0
1
อ 24 ก.ย. 2019 10:20 am โดย Patipat
งานประจำวันที่ 24 กันยายน 2562
โดย chatee supasand อ 24 ก.ย. 2019 10:15 am บอร์ด MT33 - นายชาตรี สุภาแสน
0
1
อ 24 ก.ย. 2019 10:15 am โดย chatee supasand
งานประจำวันที่ 24 กันยายน 2562
โดย birdkritsna อ 24 ก.ย. 2019 10:14 am บอร์ด M094 - กฤษณะ จะโรจน์รัมย์
0
4
อ 24 ก.ย. 2019 10:14 am โดย birdkritsna
งานประจำวันที่ 24 กันยายน 2562
โดย aninthana อ 24 ก.ย. 2019 10:14 am บอร์ด M092 - อนินธนา บุญยัง
0
1
อ 24 ก.ย. 2019 10:14 am โดย aninthana
งานประจำวันที่ 24 กันยายน 2562
โดย jamepiyawat อ 24 ก.ย. 2019 10:06 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
0
3
อ 24 ก.ย. 2019 10:06 am โดย jamepiyawat
งานประจำวันที่ 24 กันยายน 2562
โดย jirawoot อ 24 ก.ย. 2019 10:06 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
0
2
อ 24 ก.ย. 2019 10:06 am โดย jirawoot
B - FTP Connect Failed เกิดตอนสร้าง แพกเก็จ
โดย thatsawan จ 23 ก.ย. 2019 9:58 pm บอร์ด Buildin - Tester
0
1
จ 23 ก.ย. 2019 9:58 pm โดย thatsawan
Q - จะสร้าง Hosting ระบบให้ไปสร้าง domain ก่อน พอสร้าง domain เสร็จระบบสร้าง hosting ให้
โดย thatsawan จ 23 ก.ย. 2019 9:53 pm บอร์ด Buildin - Tester
0
2
จ 23 ก.ย. 2019 9:53 pm โดย thatsawan
R - ตอน สร้างเว็บไซต์ให้เสร็จเเล้ว หน้า Manage Packages ควรมีปุ่มพาไปยังหน้า จัดการหรือหน้า admin เพิ่ม
โดย thatsawan จ 23 ก.ย. 2019 9:41 pm บอร์ด Buildin - Tester
0
1
จ 23 ก.ย. 2019 9:41 pm โดย thatsawan
B - Packages Web E-Commerce ไม่มี Free เเละมี Template ให้เลือกไม่เท่า Joomla Website
โดย thatsawan จ 23 ก.ย. 2019 9:36 pm บอร์ด Buildin - Tester
0
1
จ 23 ก.ย. 2019 9:36 pm โดย thatsawan
B - ตอนเรากำลังสร้าง Packages จะมีปุ่ม Other Packages พอคลิกเลือก Packages ใหม่ข้อมูลที่กรอกต้องกรอกใหม่
โดย thatsawan จ 23 ก.ย. 2019 9:33 pm บอร์ด Buildin - Tester
0
1
จ 23 ก.ย. 2019 9:33 pm โดย thatsawan
R - ตอนเลือก Package Templates ไม่มีตัวอย่างรูปแบบ Template ให้ดู เเละไม่รู้ควรจะเลือกอะไร
โดย thatsawan จ 23 ก.ย. 2019 9:30 pm บอร์ด Buildin - Tester
0
1
จ 23 ก.ย. 2019 9:30 pm โดย thatsawan
B - สัญญาลักษณ์ ? คลิกดูไกด์ ไม่ได้
โดย thatsawan จ 23 ก.ย. 2019 9:29 pm บอร์ด Buildin - Tester
0
1
จ 23 ก.ย. 2019 9:29 pm โดย thatsawan
เปลี่ยนเทียบความน่าซื้อของ Smart Watch รุ่นต่างๆ รุ่นไหนคุ้มค่าที่สุด
โดย chatee supasand จ 23 ก.ย. 2019 7:47 pm บอร์ด MT33 - นายชาตรี สุภาแสน
0
3
จ 23 ก.ย. 2019 7:47 pm โดย chatee supasand
เงื่อนไข การค้นหา คำที่อยากให้มี และ คำที่ไม่อยากให้มี
โดย aninthana จ 23 ก.ย. 2019 7:22 pm บอร์ด Wordpress Developing Knowledge
0
16
จ 23 ก.ย. 2019 7:22 pm โดย aninthana
เทคนิค การออกแบบรหัสสินค้าหรือบริการ
โดย aninthana จ 23 ก.ย. 2019 6:59 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
2
25
อ 24 ก.ย. 2019 2:00 pm โดย mindphp
รู้จักกับ Intelligent Building คืออะไร
โดย birdkritsna จ 23 ก.ย. 2019 5:50 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
จ 23 ก.ย. 2019 5:50 pm โดย birdkritsna
Drone เพื่อการโจมตีรูปแบบใหม่
โดย birdkritsna จ 23 ก.ย. 2019 5:18 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
จ 23 ก.ย. 2019 5:18 pm โดย birdkritsna
การเขียนคำอธิบายโค้ด ใน css เพื่อเป็นคำอธิบายกันลืมโค้ด
โดย jamepiyawat จ 23 ก.ย. 2019 5:12 pm บอร์ด CSS Knowledge
0
13
จ 23 ก.ย. 2019 5:12 pm โดย jamepiyawat