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

อ่านเพิ่มเติม
{--mlinkarticle=2683--}บทที่ 5 CSS3 fonts ตอน 2{--mlinkarticle--}

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
แจกฟรี!! ปฏิทิน 2018 ประจำปีนักษัตรปีจอ
โดย Before Dong ศ 17 พ.ย. 2017 1:22 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
ศ 17 พ.ย. 2017 1:22 pm โดย Before Dong
สภาพหลังจากแก้ bug ของโปรแกรมเมอร์
โดย Before Dong ศ 17 พ.ย. 2017 10:06 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
28
ศ 17 พ.ย. 2017 10:06 am โดย Before Dong
ไฟฟ้าสถิต หรือ พรหมลิขิต
โดย Before Dong พฤ 16 พ.ย. 2017 10:15 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
46
พฤ 16 พ.ย. 2017 10:15 am โดย Before Dong
โปรแกรมไว้ สำหรับเชค ว่าไฟล์ ไหน บน Linux Ubuntu กำลังอ่านเขียนอยู่
โดย mindphp พ 15 พ.ย. 2017 2:56 pm บอร์ด Linux - Web Server
1
23
พ 15 พ.ย. 2017 3:57 pm โดย mindphp
อยากได้ระบบดีๆทุนก็ต้องหนาตามนะครับ
โดย Before Dong พ 15 พ.ย. 2017 10:51 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
112
พ 15 พ.ย. 2017 10:51 am โดย Before Dong
สอบถามเกี่ยวกับการกำหนด Title ในเว็บบอร์ด php BB
โดย AePongsak อ 14 พ.ย. 2017 4:33 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
2
30
อ 14 พ.ย. 2017 4:33 pm โดย AePongsak
สอบถามขอคำแนะนำการใช้เมนูครับ
โดย toonytoony2004 อ 14 พ.ย. 2017 1:29 pm บอร์ด Joomla Development
2
31
อ 14 พ.ย. 2017 1:29 pm โดย mindphp
เมื่อไปนำเสนอโปรแกรมที่บริษัทลูกค้า
โดย Before Dong อ 14 พ.ย. 2017 10:55 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
3
82
อ 14 พ.ย. 2017 10:55 am โดย konseo
เปรียบเทียบการแต่งตัว "ไปเที่ยวกับไปหาลูกค้า"
โดย Before Dong จ 13 พ.ย. 2017 11:14 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
318
จ 13 พ.ย. 2017 11:14 am โดย Before Dong
คำสั่งเช็ค Port บน Linux ว่า port ที่เราอยากรู้ถูกรันมาจากโปรแกรมอะไร ใช้ได้กับ Ubuntu
โดย mindphp อ 12 พ.ย. 2017 7:41 pm บอร์ด Linux - Web Server
1
54
อ 12 พ.ย. 2017 7:41 pm โดย mindphp
เช็ค Version python ใน windows 10 ได้ยังไงค่ะ
โดย thatsawan อ 12 พ.ย. 2017 6:21 pm บอร์ด Programming - C/C++ & java & Python
1
26
อ 12 พ.ย. 2017 6:21 pm โดย mindphp
เมื่อเห็นคนกำลังนั่งกินข้าว
โดย Before Dong ส 11 พ.ย. 2017 10:52 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
793
ส 11 พ.ย. 2017 10:52 am โดย konseo
วิธีการใช้ รูปแบบชุดคำสั่งภาษา go
โดย nuattawoot ศ 10 พ.ย. 2017 1:12 pm บอร์ด Programming - C/C++ & java & Python
0
40
ศ 10 พ.ย. 2017 1:12 pm โดย nuattawoot
กว่าจะมาเป็นผลงานสวยๆ
โดย Before Dong ศ 10 พ.ย. 2017 11:07 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
52
ศ 10 พ.ย. 2017 11:07 am โดย konseo
สอบถามเรื่อง Bootstrap Carousel
โดย บุคคลทั่วไป ศ 10 พ.ย. 2017 9:05 am บอร์ด Programming - PHP
1
44
ศ 10 พ.ย. 2017 9:05 am โดย บุคคลทั่วไป
Programmer ลุยกิน ลุยเที่ยว กับรีวิวการเดินทางจากดอนเมืองไปยังพิษณุโลก โดยสายการบินไทยไลอ้อนแอร์
โดย thatsawan พฤ 09 พ.ย. 2017 11:54 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
53
พฤ 09 พ.ย. 2017 11:54 pm โดย konseo
อยากได้สคริป Stock ครับ
โดย บุคคลทั่วไป พฤ 09 พ.ย. 2017 8:28 pm บอร์ด Free PHP Code Download script
1
58
พฤ 09 พ.ย. 2017 8:28 pm โดย บุคคลทั่วไป
ตำแหน่งของอาการปวดหัว
โดย Before Dong พฤ 09 พ.ย. 2017 1:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
314
พฤ 09 พ.ย. 2017 1:25 pm โดย Before Dong
เข้าหน้าเว็บเจอ ปัญหา ฐานข้อมูลรันไม่ได้ Inodb
โดย mindphp พ 08 พ.ย. 2017 9:07 pm บอร์ด Linux - Web Server
0
25
พ 08 พ.ย. 2017 9:07 pm โดย mindphp
สอบถามเกี่ยวกับหน้าเว็บที่แสดงบนมือถือมันไม่เหมาะสม
โดย AePongsak พ 08 พ.ย. 2017 5:13 pm บอร์ด Programming - PHP
2
62
พ 08 พ.ย. 2017 5:13 pm โดย AePongsak