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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
สินค้าไม่ขึ้นตามที่ต้องการ
โดย บุคคลทั่วไป พ 26 ก.ค. 2017 7:52 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
3
พ 26 ก.ค. 2017 7:52 pm โดย บุคคลทั่วไป
Visibility การกำหนดสิทธิ์ในการเข้าถึงตัวแปร
โดย Ik Kat พ 26 ก.ค. 2017 4:14 pm บอร์ด PHP Knowledge
0
5
พ 26 ก.ค. 2017 4:14 pm โดย Ik Kat
วิธีการสร้าง Function ใช้เอง
โดย Ik Kat พ 26 ก.ค. 2017 3:44 pm บอร์ด PHP Knowledge
0
10
พ 26 ก.ค. 2017 3:44 pm โดย Ik Kat
วิธีการเรียกใช้งาน Class และ Method
โดย Ik Kat พ 26 ก.ค. 2017 3:07 pm บอร์ด PHP Knowledge
0
3
พ 26 ก.ค. 2017 3:07 pm โดย Ik Kat
ไม่สามารถตั้งรอบระยเวลาบัญชีของโปรแกรมบัญชีสรรพากร
โดย บุคคลทั่วไป พ 26 ก.ค. 2017 2:58 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
2
พ 26 ก.ค. 2017 2:58 pm โดย บุคคลทั่วไป
วิธีการใช้งาน Array Function เบื้องต้น
โดย Ik Kat พ 26 ก.ค. 2017 2:39 pm บอร์ด PHP Knowledge
0
6
พ 26 ก.ค. 2017 2:39 pm โดย Ik Kat
วิธีการใช้งาน Date Time Function เบื้องต้น
โดย Ik Kat พ 26 ก.ค. 2017 2:11 pm บอร์ด PHP Knowledge
0
2
พ 26 ก.ค. 2017 2:11 pm โดย Ik Kat
วิธีการใช้งาน Math Function เบื้องต้น
โดย Ik Kat พ 26 ก.ค. 2017 1:33 pm บอร์ด PHP Knowledge
0
5
พ 26 ก.ค. 2017 1:33 pm โดย Ik Kat
วิธีการใช้งาน String Function เบื้องต้น
โดย Ik Kat พ 26 ก.ค. 2017 1:10 pm บอร์ด PHP Knowledge
0
4
พ 26 ก.ค. 2017 1:10 pm โดย Ik Kat
ความหมายของฟังก์ชั่น PHP ที่ควรรู้จัก
โดย Ik Kat พ 26 ก.ค. 2017 11:42 am บอร์ด PHP Knowledge
0
8
พ 26 ก.ค. 2017 11:42 am โดย Ik Kat
การ Export รายงานสรุปยอดซื้อ ในโปรแกรมบัญชี Express
โดย pleng พ 26 ก.ค. 2017 10:51 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
3
พ 26 ก.ค. 2017 10:51 am โดย pleng
Joomla ออกเวอร์ชั่น 3.7.4 Fix Bug เรื่องความปลอดภัย 2 จุดใหญ่ และ Error ในเวอร์ชั่นก่อนหน้า
โดย mindphp พ 26 ก.ค. 2017 6:51 am บอร์ด PHP News
0
8
พ 26 ก.ค. 2017 6:51 am โดย mindphp
ผมใช้ Odoo9 ผมทำการ Restor มันนานมั้งใช้เวลาเป็นวันเลยครับ
โดย nuattawoot อ 25 ก.ค. 2017 7:58 pm บอร์ด Odoo
2
8
อ 25 ก.ค. 2017 8:23 pm โดย mindphp
ทำไมฉันเข้าเฟสบุกของฉันต้องมีคำว่าเฟสม่ต
โดย คูกูหาที่เกีดบ่อได้ ต้องทำใจรอเนื้อคู่ อ 25 ก.ค. 2017 7:40 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
อ 25 ก.ค. 2017 7:40 pm โดย คูกูหาที่เกีดบ่อได้ ต้องทำใจรอเนื้อคู่
รบกวนสอบถามปัญหา SSL กับ woocommerce theme หน่อยครับ
โดย permchai อ 25 ก.ค. 2017 6:55 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
3
11
อ 25 ก.ค. 2017 6:55 pm โดย mindphp
รบกวนสอบถามเกี่ยวกับ SSL กับ woocommerce ครับ
โดย permchai อ 25 ก.ค. 2017 6:51 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
6
อ 25 ก.ค. 2017 6:51 pm โดย permchai
อยากทราบวิธีการสร้าง xml หน่อยครับ
โดย บัวบุญ จันทะโคตร อ 25 ก.ค. 2017 6:42 pm บอร์ด Programming - C/C++ & java & Python
1
19
อ 25 ก.ค. 2017 6:42 pm โดย AePongsak
การ Export กระดาษทำการ ในโปรแกรมบัญชี Express
โดย pleng อ 25 ก.ค. 2017 6:13 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
8
อ 25 ก.ค. 2017 6:13 pm โดย pleng
การ Export งบทดลอง ในโปรแกรมบัญชี Express
โดย pleng อ 25 ก.ค. 2017 3:47 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
5
อ 25 ก.ค. 2017 3:47 pm โดย pleng
การ Export สมุดรายวัน ในโปรแกรมบัญชี Express
โดย pleng อ 25 ก.ค. 2017 2:06 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
12
อ 25 ก.ค. 2017 2:06 pm โดย pleng