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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สรุปความรู้จากวีดีโอการสร้างเทมเพลต
โดย tai14 จ 20 ส.ค. 2018 7:44 pm บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
2
จ 20 ส.ค. 2018 7:44 pm โดย tai14
แนะนำตัวช่วยในการ หาคำที่มีจำนวนการใช้งานมากที่สุด
โดย tatiya จ 20 ส.ค. 2018 4:54 pm บอร์ด Python Knowledge
0
11
จ 20 ส.ค. 2018 4:54 pm โดย tatiya
ตัวอย่างการใช้ Match Fuction
โดย tai14 จ 20 ส.ค. 2018 4:29 pm บอร์ด PHP Knowledge
0
8
จ 20 ส.ค. 2018 4:29 pm โดย tai14
ทำความรู้จักกับ Built-in Functions
โดย tai14 จ 20 ส.ค. 2018 3:40 pm บอร์ด PHP Knowledge
0
8
จ 20 ส.ค. 2018 3:40 pm โดย tai14
กลุ่มคำสั่งการทำงานซ้ำ
โดย tai14 จ 20 ส.ค. 2018 11:51 am บอร์ด PHP Knowledge
0
14
จ 20 ส.ค. 2018 11:51 am โดย tai14
ใบเสร็จรับเงินจาก POS แสดงเลขที่ Invoice ไม่ถูกต้อง [2018-08][006]
โดย AePongsak จ 20 ส.ค. 2018 10:54 am บอร์ด Hachanna - Testter
2
13
จ 20 ส.ค. 2018 5:18 pm โดย AePongsak
งานประจำวันที่ 20 สิงหาคม 2561
โดย Lamduan จ 20 ส.ค. 2018 10:23 am บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
0
4
จ 20 ส.ค. 2018 10:23 am โดย Lamduan
งานที่ต้องทำประจำวันที่ 20 สิงหาคม 2561
โดย tai14 จ 20 ส.ค. 2018 10:18 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
4
15
จ 20 ส.ค. 2018 8:21 pm โดย thatsawan
งานประจำวันที่ 20 สิงหาคม 2561
โดย tatiya จ 20 ส.ค. 2018 10:13 am บอร์ด M065 - ตติยะ นาชัย
1
4
จ 20 ส.ค. 2018 7:34 pm โดย tatiya
งานประจำวันที่ 20 สิงหาคม 2561
โดย pprn จ 20 ส.ค. 2018 10:11 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
7
จ 20 ส.ค. 2018 7:37 pm โดย pprn
งานประจำวันที่ 20 สิงหาคม 2561
โดย prakon จ 20 ส.ค. 2018 10:07 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
16
จ 20 ส.ค. 2018 10:07 am โดย prakon
B - Period Payment หน้าทำใบเสนอราคาต้องอยู่ ที่ tab แรก และเป็นราคาหลังรวม vat แล้ว
โดย mindphp จ 20 ส.ค. 2018 3:42 am บอร์ด M.D.Soft Co.,Ltd. - Tester
0
2
จ 20 ส.ค. 2018 3:42 am โดย mindphp
Q-สอบถามครับตอนนี้ผมติดปัญหา EnvironmentError: [Errno 13] Permission denied:
โดย tatiya อ 19 ส.ค. 2018 10:41 pm บอร์ด Programming - C/C++ & java & Python
2
28
จ 20 ส.ค. 2018 6:21 am โดย tatiya
วิธีแก้ปัญหา 'pip' is not recognized as an internal or external command, operable program or batch file
โดย tatiya อ 19 ส.ค. 2018 9:56 pm บอร์ด Python Knowledge
0
13
อ 19 ส.ค. 2018 9:56 pm โดย tatiya
สอบถามวิธีติดตั้งตัว module pythainlp ครับ
โดย tatiya อ 19 ส.ค. 2018 5:41 pm บอร์ด Programming - C/C++ & java & Python
3
25
อ 19 ส.ค. 2018 8:10 pm โดย mindphp
สอบถามวิธีการใส่ค่าที่ต้องการใน type="number" เป็นตัวเลขได้ทั้งบวก ลบ และทศนิยมที่มีค่าเป็นบวกและลบ แต่ไม่เอา 0 ค่ะ
โดย pprn ส 18 ส.ค. 2018 8:14 pm บอร์ด HTML CSS
1
26
อ 19 ส.ค. 2018 5:15 pm โดย mindphp
B - หน้า Contact ของลูกค้ามีปุ่มติ๊กเกินมา
โดย thatsawan ส 18 ส.ค. 2018 6:59 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
3
ส 18 ส.ค. 2018 6:59 pm โดย thatsawan
อบรมระบบ ERP Odoo 11 ครั้งที่ 30 วันที่ 18 สิงหาคม 2561
โดย Lamduan ส 18 ส.ค. 2018 6:58 pm บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
0
5
ส 18 ส.ค. 2018 6:58 pm โดย Lamduan
สอบถามวิธีการคำนวณหา Rate ค่ะ
โดย pprn ส 18 ส.ค. 2018 6:51 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
22
ส 18 ส.ค. 2018 6:51 pm โดย pprn
B - ฐานจริง User M017 สร้าง inv จากหน้า sale ไม่ได้
โดย thatsawan ส 18 ส.ค. 2018 4:57 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
2
ส 18 ส.ค. 2018 4:57 pm โดย thatsawan