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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เจอปัญหา เข้าเมล roundcube ไม่ได้ เจอ Error connection to storage server failed
โดย mindphp อ 18 ก.พ. 2018 7:16 pm บอร์ด Linux - Web Server
0
6
อ 18 ก.พ. 2018 7:16 pm โดย mindphp
แก้ปัญหา ส่งเมลไม่ออก Roundcube: SMTP Error (-1): Connection to server failed.
โดย mindphp อ 18 ก.พ. 2018 6:16 pm บอร์ด Linux - Web Server
1
4
อ 18 ก.พ. 2018 6:35 pm โดย mindphp
ปัญหาเมล Mail Server exim Start ไม่ขึ้น บน Ubuntu
โดย mindphp อ 18 ก.พ. 2018 5:40 pm บอร์ด Linux - Web Server
1
4
อ 18 ก.พ. 2018 5:46 pm โดย mindphp
โหลดไฟล์ joomshopping ไม่ได้
โดย Jao SaCk อ 18 ก.พ. 2018 4:33 am บอร์ด Joomla Development
3
10
จ 19 ก.พ. 2018 3:58 am โดย mindphp
ช่วยด้วยค่ะหนูต้องการให้ตั้งเงื่อนไขให้เอาค่าdefaultที่เลือกอยู่ใน listbox มาแสดงเป็นข้อความหนูต้องทำอย่างไรค่ะ
โดย Parichat ส 17 ก.พ. 2018 11:11 pm บอร์ด Joomla Development
1
24
อ 18 ก.พ. 2018 2:10 pm โดย mindphp
อยากทราบคำสั่งสำหรับวนลูปในการคลิกเลือกหน้าถัดไป
โดย Panchalee ส 17 ก.พ. 2018 6:40 pm บอร์ด Programming - C/C++ & java & Python
0
24
ส 17 ก.พ. 2018 6:40 pm โดย Panchalee
วิธีการติดตั้งเวอร์ชั่น php ในโปรแกรม Laragon
โดย Parichat ส 17 ก.พ. 2018 6:31 pm บอร์ด PHP Knowledge
0
26
ส 17 ก.พ. 2018 6:31 pm โดย Parichat
ปัญหาเรื่องบทความComponent, Module และ Plug in แตกต่างกันอย่างไร
โดย alisa93 ส 17 ก.พ. 2018 11:33 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
24
ส 17 ก.พ. 2018 2:27 pm โดย mindphp
ปัญหาเรื่องบทความ Joomla Extension
โดย alisa93 ส 17 ก.พ. 2018 10:56 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
32
ส 17 ก.พ. 2018 2:34 pm โดย mindphp
Selenium : คำสั่งสำหรับเช็ค Error ความสมบูรณ์ที่หน้าเว็บ
โดย Panchalee ศ 16 ก.พ. 2018 3:53 pm บอร์ด Software testing
0
19
ศ 16 ก.พ. 2018 3:53 pm โดย Panchalee
การสร้าง URL ให้แสดงทั้งไอดีทั้งจังหวัดต้องทำอย่างไรค่ะ
โดย Parichat ศ 16 ก.พ. 2018 2:40 pm บอร์ด Joomla Development
1
28
ศ 16 ก.พ. 2018 2:50 pm โดย tsukasaz
การสร้าง URL ให้แสดงทั้งลิ้งทั้งจังหวัดต้องทำอย่างไรค่ะ
โดย Parichat ศ 16 ก.พ. 2018 2:39 pm บอร์ด Joomla Development
3
35
ศ 16 ก.พ. 2018 3:23 pm โดย Parichat
อยากทราบคำสั่งสำหรับการเช็ค Error ในกรณีที่หน้าเว็บโหลดขึ้นไม่ครบ
โดย Panchalee ศ 16 ก.พ. 2018 2:14 pm บอร์ด Programming - C/C++ & java & Python
1
27
ศ 16 ก.พ. 2018 2:16 pm โดย thatsawan
ความเเตกต่าง ระหว่าง python 2 - python 3
โดย Jom07 ศ 16 ก.พ. 2018 1:48 pm บอร์ด Python Knowledge
0
33
ศ 16 ก.พ. 2018 1:48 pm โดย Jom07
Selenium : การใช้คำสั่งวนลูปใน xpath
โดย Panchalee ศ 16 ก.พ. 2018 1:44 pm บอร์ด Software testing
0
25
ศ 16 ก.พ. 2018 1:44 pm โดย Panchalee
จะขอถามเรื่องการเข้าไปดูผลลัพธ์ที่สร้าง Component ที่ชื่อว่า OS Responsive Image Gallery ยังไงค่ะ
โดย Parichat ศ 16 ก.พ. 2018 1:35 pm บอร์ด Joomla Development
2
32
ศ 16 ก.พ. 2018 1:55 pm โดย Parichat
OS Responsive Image Gallery(โอเอส เรสปอน์ซีฟอิมเมดแกลเลอรี่)-Component แกลเลอรี Joomla ที่เรียบง่าย
โดย Parichat ศ 16 ก.พ. 2018 1:29 pm บอร์ด Joomla Extension Review
0
21
ศ 16 ก.พ. 2018 1:29 pm โดย Parichat
การ์ดจอ กับ สโมสร ลิเวอร์พูล
โดย Before Dong ศ 16 ก.พ. 2018 10:33 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
31
ศ 16 ก.พ. 2018 2:07 pm โดย jobyjob
สอบถามค่ะ การยื่นภงด.1ก ยืนไม่ตรงกับภงด 1 ใบแนบเเต่ละเดือนเป็นไปได้มั้ยค่ะ
โดย thatsawan ศ 16 ก.พ. 2018 10:09 am บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
3
26
ศ 16 ก.พ. 2018 10:15 am โดย atipornh
การทำ webdriver บน Python GUI (Tkinter)
โดย Jom07 พฤ 15 ก.พ. 2018 6:48 pm บอร์ด Software testing
0
37
พฤ 15 ก.พ. 2018 6:48 pm โดย Jom07