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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ตัวอย่าง การ Query ข้อมูลทีเป็นที่ได้ผลการค้นหา
โดย mindphp พ 15 ม.ค. 2020 6:40 pm บอร์ด Programming - C/C++ & java & Python
0
86
พ 15 ม.ค. 2020 6:40 pm โดย mindphp
สอบถามครับ ทำไมสร้างตารางฐานข้อมูลแล้ว มันไม่ใน ใน pg
โดย chatee supasand พ 15 ม.ค. 2020 5:55 pm บอร์ด Programming - C/C++ & java & Python
4
118
พ 15 ม.ค. 2020 6:07 pm โดย thatsawan
ขอสอบถาม error ของ flask ครับ
โดย benzas00123 พ 15 ม.ค. 2020 10:44 am บอร์ด Programming - C/C++ & java & Python
4
120
พ 15 ม.ค. 2020 10:53 am โดย benzas00123
สอบถาม code ของ Flask หน่อยครับว่ามันเอาไว้ใช้ทำอะไร
โดย benzas00123 อ 14 ม.ค. 2020 4:50 pm บอร์ด Programming - C/C++ & java & Python
3
135
พ 15 ม.ค. 2020 5:54 am โดย mindphp
วิธีการเพิ่มส่วนการแสดงในหน้าสมัครสมาชิกของ เว็บบอร์ด phpbb
โดย Ittichai_chupol อ 14 ม.ค. 2020 3:19 pm บอร์ด PHP Knowledge
0
103
อ 14 ม.ค. 2020 3:19 pm โดย Ittichai_chupol
อยากทราบวิธีการแก้ไขปัญหา การเปิดใช้งาน xampp
โดย Ittichai_chupol อ 14 ม.ค. 2020 11:11 am บอร์ด Programming - PHP
6
2370
อ 14 ม.ค. 2020 3:20 pm โดย Ittichai_chupol
การแปลงข้อมูลที่ดึงมาจาก database ที่เป็น list ให้เป็น string เพื่อนำมาใช้ประโยชน์ในด้านต่างๆ
โดย benzas00123 จ 13 ม.ค. 2020 5:34 pm บอร์ด Python Knowledge
0
84
จ 13 ม.ค. 2020 5:34 pm โดย benzas00123
การใช้ os.walk ในการหานามสกุลไฟล์ที่ต้องการทั้งหมดที่อยู่ใน Project
โดย benzas00123 จ 13 ม.ค. 2020 3:09 pm บอร์ด Python Knowledge
0
99
จ 13 ม.ค. 2020 3:09 pm โดย benzas00123
ปฏิทินประจําปี 2563 ธีมรูปแบบญี่ปุ่น
โดย noppadonsk จ 13 ม.ค. 2020 2:32 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
164
จ 13 ม.ค. 2020 2:32 pm โดย noppadonsk
ขอสอบถามวิธํีการ split tuple หน่อยครับ
โดย benzas00123 จ 13 ม.ค. 2020 11:17 am บอร์ด Programming - C/C++ & java & Python
7
152
จ 13 ม.ค. 2020 12:11 pm โดย benzas00123
มีปัญหากับ do-while ค่ะ
โดย mashato ส 11 ม.ค. 2020 10:03 pm บอร์ด Programming - C/C++ & java & Python
1
126
อ 12 ม.ค. 2020 5:40 pm โดย mindphp
ขอทราบวิธีการติดตั้ง pgadmin 4 บน ubuntu ครับ
โดย benzas00123 ส 11 ม.ค. 2020 4:30 pm บอร์ด SQL - Database
8
183
ส 11 ม.ค. 2020 5:38 pm โดย benzas00123
ทิปการเขียน php ลบ Cookies ทั้งหมด ออกด้วย php
โดย mindphp ส 11 ม.ค. 2020 1:54 pm บอร์ด PHP Knowledge
0
58
ส 11 ม.ค. 2020 1:54 pm โดย mindphp
วิธีการเขียน SQL เพื่ม PRIMARY KEY ตาราง ฐานข้อมูล
โดย Ittichai_chupol ศ 10 ม.ค. 2020 6:20 pm บอร์ด SQL Knowledge
0
117
ศ 10 ม.ค. 2020 6:20 pm โดย Ittichai_chupol
วิธีการสร้างหน้าเว็บให้หน่วงเวลาก่อนจะไปยังหน้าเว็บจริง ๆ ด้วยฟังชั่น header()
โดย jamepiyawat ศ 10 ม.ค. 2020 5:51 pm บอร์ด PHP Knowledge
0
101
ศ 10 ม.ค. 2020 5:51 pm โดย jamepiyawat
ช่วยอธิบาย Code การ zip file หน่อยครับ
โดย benzas00123 ศ 10 ม.ค. 2020 11:35 am บอร์ด Programming - C/C++ & java & Python
3
108
ศ 10 ม.ค. 2020 12:16 pm โดย benzas00123
จำลองรูปแบบแผนการเล่นฟุตบอลเพื่อใช้เป็นกลยุทธ์ในการเล่นด้วยโปรแกรมจัดรูปแบบแผนการเล่นฟุตบอล
โดย prmindphp พฤ 09 ม.ค. 2020 7:19 pm บอร์ด MindPHP News & Feedback
0
109
พฤ 09 ม.ค. 2020 7:19 pm โดย prmindphp
ช่วยหน่อยครับ รับค่าข้อมูลเพื่อบันทึกลงไปในฐานข้อมูลของ Postgres ไม่ได้ครับ
โดย benzas00123 พฤ 09 ม.ค. 2020 5:53 pm บอร์ด Programming - C/C++ & java & Python
0
71
พฤ 09 ม.ค. 2020 5:53 pm โดย benzas00123
การเชื่อต่อฐานข้อมูล Postgres ด้วย Module psycopg2
โดย benzas00123 พฤ 09 ม.ค. 2020 3:48 pm บอร์ด Python Knowledge
0
64
พฤ 09 ม.ค. 2020 3:48 pm โดย benzas00123
เชื่อมต่อกับ ฐานข้อมูลของ psycopg2 ไม่ได้ครับ
โดย benzas00123 พฤ 09 ม.ค. 2020 2:28 pm บอร์ด Programming - C/C++ & java & Python
1
56
พฤ 09 ม.ค. 2020 2:53 pm โดย benzas00123