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

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

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

     ปัญหาการแสดงผลของฟอนต์บนเว็บไซต์ ไม่ว่าจะเป็นเรื่องลิขสิทธิ์ หรือปัญหาการใช้ฟอนต์ภาษาไทยที่ไม่ค่อยสะดวกและมีปัญหาเรื่องการแสดงผลบนหน้าเว็บไซต์มาก ทำให้หลายคนต้องใช้ฟอนต์ภาษาไทยในตระกูล Web Safe Font(MS Sans Serif, Tahoma, etc?) ซึ่งก็มีแบบให้เลือกน้อยแถมไม่ค่อยสวยด้วย และถ้าอยากใช้ฟอนต์สวยๆก็ต้องจำใจทำตัวหนังสือให้เป็นรูปภาพ ซึ่งถึงจะใช้ได้แต่ก็มีข้อเสียมากมาย เช่น
 -คอมพิวเตอร์อ่านไม่ออก ไม่รู้ว่าเป็นตัวหนังสือ
 -ทำให้เว็บมีขนาดใหญ่ ใช้เวลาโหลดนานขึ้น
 -ก๊อปปี้ตัวหนังสือไม่ได้
 -แก้ไขข้อความยาก ต้องเสียเวลาทำภาพใหม่
   แต่ข้อจำกัดเหล่านี้ก็กำลังจะหมดไป ด้วยคุณสมบัติใหม่ของ CSS3 @font-face ที่จะทำให้เราสามารถนำตัวฟอนต์สวยๆมาใส่ในเว็บไซต์ได้ และจะยังมคุณสมบัติเหมือนตัวหนังสือทั่วไปทุกประการ

   ใน CSS3 คำสั่งเกี่ยวกับการแสดงผลรูปแบบฟอนท์ จะใช้คำสั่ง @font-face ตามนี้
@font-face
{font-family:Font Name;}     
แต่กรณีที่เราต้องการใช้ Font อื่นๆ ที่คิดว่าไม่ได้มีอยู่ในเครื่องของผู้ใช้ทั่วไป เราก็จะต้องเอาไฟล์ฟอนท์ อัพโหลดขึ้นไปอยู่ในเซอร์ โดยกำหนด ชื่อ font-family และกำหนดที่อยู่ของ font (ด้วยที่อยู่ url)
@font-face
{ font-family: Font Name;
src: url('ที่อยู่ URL ของฟอนต์ที่เราชอบ') }
  h1
{font-family:Font name}

วิธีการใช้ @font-face
   เนื่องจาก @font-face นี้เป็นหนึ่งในไม่กี่อย่างของ CSS3 ที่สามารถใช้งานใน IE ได้แม้กระทั่งใน IE6 เลยทีเดียว โดยขั้นแรกก็เอาฟอนต์ที่เราชื่นชอบมาแปลงเป็นชุดของฟอนต์สำหรับใช้ในเว็บเสียก่อน โดยเครื่องมือที่ใช้ง่ายที่สุดได้แก่ @font-face Kit Generator โดย เข้าไปที่ http://www.fontsquirrel.com/tools/webfont-generator  จากนั้นทำตามขั้นตอนด้านล่าง

-กด +Add Font

-คลิกเลือกฟอนต์ที่ต้องการ


-เลือก Expert
-ในช่อง Subsetting: เลือก No Subsetting เพื่อให้ใช้ภาษาไทยได้
-เสร็จ ก็ทำเครื่องหมายถูกหน้าคำว่า Yes, the fonts I?m uploading are legally eligible for web embedding.  เสร็จแล้ว กดปุ่ม Download your Kit   เราก็จะได้ ไฟล์ webfontkit มาตัวนึง
ตามรูปด้านล่าง


    หลังจากได้ ไฟล์ webfontkit มาแล้วให้ทำการแตกไฟล์ จะพบกับไฟล์ font ที่แปลงแล้วอันได้แก่ eot, svg, tff, woff และไฟล์ต่าง ๆ เช่น demo.html ,stylesheet.css  แล้วก็ config  เอาไปอัพโหลดใส่ในเซิร์ฟเวอร์ของเรา เพื่อใช้งานต่อไป  

เวอร์ชั่นของ Browser ที่รองรับ @font-face
- Android  2.3 ขึ้นไป
- Chrome 1.3 ขึ้นไป
- FireFox 4.0 ขึ้นไป
- Internet Explorer 6.0 ขึ้นไป
- iOS Safari 4.0 ขึ้นไป
- Opera 11.0 ขึ้นไป
- Safari  5.0 ขึ้นไป

อ่านเพิ่มเติม
บทที่ 5 CSS3 fonts ตอน 2

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - บริษัท approve ประวัติที่ส่งมาสมัครเเล้ว เเต่ยังแสดงสถานะเดิมอยู่
โดย thatsawan อ 26 พฤษภาคม 2020 6:27 pm บอร์ด Odoojob.com - Tester
0
4
อ 26 พฤษภาคม 2020 6:27 pm โดย thatsawan
อยากทราบวิธีการแก้ไข ภาษาไทยกลายอักษรแปลกๆ
โดย Ittichai_chupol จ 25 พฤษภาคม 2020 4:35 pm บอร์ด Programming - PHP
1
22
จ 25 พฤษภาคม 2020 5:43 pm โดย thatsawan
อยากทราบวิธีการ แบบคอลัมเป็น 3 คอลีม โดยใช้ tag <dl>
โดย Ittichai_chupol จ 25 พฤษภาคม 2020 11:56 am บอร์ด HTML CSS
1
28
จ 25 พฤษภาคม 2020 2:42 pm โดย thatsawan
บันทึกประชุม มารียา ซีฟู้ดส์
โดย thatsawan จ 25 พฤษภาคม 2020 11:40 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
1
จ 25 พฤษภาคม 2020 11:40 am โดย thatsawan
10 สุดยอดสตรีทฟู้ดในแอฟริกาตะวันตก
โดย Anonymous อ 24 พฤษภาคม 2020 9:58 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
42
จ 25 พฤษภาคม 2020 8:03 pm โดย ขุนพล ตั้นตระกูล
ข้อมูลสำหรับทำระบบ
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
3
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดดความคืบหน้า / Progress - มารียา ซีฟู้ดส์
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
3
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดด Template เว็บไซต์ FDD (V2)
โดย mindphp อ 24 พฤษภาคม 2020 3:51 am บอร์ด FDD (Main)
0
1
อ 24 พฤษภาคม 2020 3:51 am โดย mindphp
R - ปรับกราฟฟิก ของเว็บ FDD
โดย mindphp อ 24 พฤษภาคม 2020 3:50 am บอร์ด FDD (Main)
0
2
อ 24 พฤษภาคม 2020 3:50 am โดย mindphp
ความคืบหน้า / Progress
โดย mindphp อ 24 พฤษภาคม 2020 3:46 am บอร์ด FDD (Main)
1
3
อ 26 พฤษภาคม 2020 8:18 am โดย mindphp
VDO - SP Page builder
โดย numtan5839 ศ 22 พฤษภาคม 2020 6:27 pm บอร์ด SP Page Builder Thai Edition - Manual & VDO & เทคนิคการใช้งาน
1
7
ศ 22 พฤษภาคม 2020 7:00 pm โดย mindphp
วิธีการใช้ Google Tasks แอพจัดการบันทึกสิ่งที่ต้องทำ
โดย sirirat ศ 22 พฤษภาคม 2020 11:04 am บอร์ด Share Knowledge
0
62
ศ 22 พฤษภาคม 2020 11:04 am โดย sirirat
งานประจำวันที่ 22 พฤษภาคม 2563
โดย sirirat ศ 22 พฤษภาคม 2020 10:10 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
1
15
ศ 22 พฤษภาคม 2020 11:22 am โดย numtan5839
สรุปการเรียนรู้ประจำวัน 21/05/63
โดย sirirat ศ 22 พฤษภาคม 2020 10:08 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
0
3
ศ 22 พฤษภาคม 2020 10:08 am โดย sirirat
รายงานความคืบหน้า / Process
โดย mindphp ศ 22 พฤษภาคม 2020 1:07 am บอร์ด SP Page Builder Thai Edition (Main)
1
3
ศ 22 พฤษภาคม 2020 1:34 am โดย mindphp
ส่ง site map ให้ google แต่ไม่โชว์ในเมนูบนเว็บเรา จะมีผลอะไรกับเว็บไหมครับ
โดย toonytoony2004 พฤ 21 พฤษภาคม 2020 10:17 pm บอร์ด Joomla Development
6
94
ส 23 พฤษภาคม 2020 10:56 pm โดย toonytoony2004
B - เวลาของบอร์ดไม่ตรงเวลาไทย
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:19 pm บอร์ด Odoojob.com - Tester
0
2
พฤ 21 พฤษภาคม 2020 5:19 pm โดย thatsawan
(Close)B - ข้อความแนะนำตัว ของผู้สมัครไม่แสดงใน บริษัทที่เปิดรับ
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:18 pm บอร์ด Odoojob.com - Tester
2
5
อ 26 พฤษภาคม 2020 6:22 pm โดย thatsawan
R - [email Formart-หาคน] เเจ้งเมื่อมีคนสมัครงานใน Odoojob
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:12 pm บอร์ด Odoojob.com - Manual & Content
0
1
พฤ 21 พฤษภาคม 2020 5:12 pm โดย thatsawan
B - บริษัทหาคน ต้องการเปลี่ยน Email รับสมัครงานหาทางเข้าไม่เจอ
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:07 pm บอร์ด Odoojob.com - Tester
0
3
พฤ 21 พฤษภาคม 2020 5:07 pm โดย thatsawan