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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การตั้งค่า ข้อมูลส่วนตัว
โดย จันนุสรณ์ ดีแก่ อ 18 ธ.ค. 2018 6:58 pm บอร์ด phpBB user Guide Knowledge
0
7
อ 18 ธ.ค. 2018 6:58 pm โดย จันนุสรณ์ ดีแก่
ไอคอนกระทู้ และการใช้งาน
โดย จันนุสรณ์ ดีแก่ อ 18 ธ.ค. 2018 5:17 pm บอร์ด phpBB user Guide Knowledge
0
8
อ 18 ธ.ค. 2018 5:17 pm โดย จันนุสรณ์ ดีแก่
วิธีการส่งค่าตัวแปร จาก html เข้าไปใช้ใน javascript
โดย Ittichai_chupol อ 18 ธ.ค. 2018 5:13 pm บอร์ด Programming - PHP
2
18
อ 18 ธ.ค. 2018 5:20 pm โดย Ittichai_chupol
ทำไงให้เข้าระบบได้ตลอดเวลาโดยไม่ต้องพิมพ์รหัสผ่าน
โดย จันนุสรณ์ ดีแก่ อ 18 ธ.ค. 2018 4:46 pm บอร์ด phpBB user Guide Knowledge
0
8
อ 18 ธ.ค. 2018 4:46 pm โดย จันนุสรณ์ ดีแก่
ภาษา C
โดย จันนุสรณ์ ดีแก่ อ 18 ธ.ค. 2018 1:29 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
9
อ 18 ธ.ค. 2018 1:29 pm โดย จันนุสรณ์ ดีแก่
ตัวอย่าง User Acceptance Test
โดย noonueng_999 อ 18 ธ.ค. 2018 11:10 am บอร์ด Share Knowledge
0
13
อ 18 ธ.ค. 2018 11:10 am โดย noonueng_999
Q - Camtasia ไม่สามารถนำไฟล์เข้ามาตัดต่อได้
โดย จันนุสรณ์ ดีแก่ อ 18 ธ.ค. 2018 10:22 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
8
57
อ 18 ธ.ค. 2018 4:55 pm โดย จันนุสรณ์ ดีแก่
Q - รัน localhost แล้วขึ้นแบบนี้ สามารถแก้ด้วยวิธีใดคะ
โดย จันนุสรณ์ ดีแก่ อ 18 ธ.ค. 2018 9:35 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
24
อ 18 ธ.ค. 2018 9:35 am โดย จันนุสรณ์ ดีแก่
กดส่งอีเมลในแบบฟอร์มการติดต่อแล้วขึ้น Error 404 Object not found ต้องแก้ไขยังไงครับ
โดย Tewlie Pinsakorn จ 17 ธ.ค. 2018 11:36 pm บอร์ด Joomla Development
2
28
อ 18 ธ.ค. 2018 12:46 pm โดย Tewlie Pinsakorn
วิธีการเพิ่ม BBcode ในเว็บ ปุ่มจัดกลาง
โดย จันนุสรณ์ ดีแก่ จ 17 ธ.ค. 2018 6:04 pm บอร์ด phpBB user Guide Knowledge
0
11
จ 17 ธ.ค. 2018 6:04 pm โดย จันนุสรณ์ ดีแก่
BBcode การจัดกึ่งกลาง
โดย จันนุสรณ์ ดีแก่ จ 17 ธ.ค. 2018 6:03 pm บอร์ด phpBB user Guide Knowledge
0
13
จ 17 ธ.ค. 2018 6:03 pm โดย จันนุสรณ์ ดีแก่
การค้นหาขั้นสูง
โดย จันนุสรณ์ ดีแก่ จ 17 ธ.ค. 2018 4:54 pm บอร์ด phpBB user Guide Knowledge
0
17
จ 17 ธ.ค. 2018 4:54 pm โดย จันนุสรณ์ ดีแก่
อยากได้แอคเซสเข้าสู่หัวใจเธอ
โดย จันนุสรณ์ ดีแก่ จ 17 ธ.ค. 2018 2:13 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
17
จ 17 ธ.ค. 2018 2:13 pm โดย จันนุสรณ์ ดีแก่
วิธีการใช้งาน Function preg_match()
โดย Ittichai_chupol จ 17 ธ.ค. 2018 11:29 am บอร์ด PHP Knowledge
0
13
จ 17 ธ.ค. 2018 11:29 am โดย Ittichai_chupol
Joomshopping ไม่สามารถใช้ฟังชั่นก์ส่งเมลได้
โดย Kritsana Leesakul อ 16 ธ.ค. 2018 8:37 pm บอร์ด Joomla Development
8
54
อ 18 ธ.ค. 2018 1:25 am โดย fernn25
วิธีแก้ปัญหาลืมรหัสผ่าน admin ของ Worlpress โดยการเปลี่ยนรหัสด้วย phpMyadmin
โดย mindphp อ 16 ธ.ค. 2018 6:44 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
12
อ 16 ธ.ค. 2018 6:44 pm โดย mindphp
วิธีการใช้งาน Function preg_match_all()
โดย Ittichai_chupol ส 15 ธ.ค. 2018 6:19 pm บอร์ด PHP Knowledge
0
17
ส 15 ธ.ค. 2018 6:19 pm โดย Ittichai_chupol
การสร้างกระดานข่าวในส่วนของผู้ดูแลระบบ
โดย จันนุสรณ์ ดีแก่ ศ 14 ธ.ค. 2018 4:38 pm บอร์ด phpBB user Guide Knowledge
0
28
ศ 14 ธ.ค. 2018 4:38 pm โดย จันนุสรณ์ ดีแก่
วิธีแก้เมื่อ Phpbb ขึ้นว่า กรุณาลบไดเรกเทอรี หากไดเรกเทอรียังอยู่ใช้ได้แต่ แผงควบคุมเท่านั้น
โดย จันนุสรณ์ ดีแก่ ศ 14 ธ.ค. 2018 3:39 pm บอร์ด phpBB user Guide Knowledge
0
30
ศ 14 ธ.ค. 2018 3:39 pm โดย จันนุสรณ์ ดีแก่
การค้นหาภายในกระทู้
โดย จันนุสรณ์ ดีแก่ ศ 14 ธ.ค. 2018 1:54 pm บอร์ด phpBB user Guide Knowledge
0
29
ศ 14 ธ.ค. 2018 1:54 pm โดย จันนุสรณ์ ดีแก่