@font-face rule คืออะไร?
ในสมัยก่อน font ที่เราจะใช้ได้ จะต้องติดตั้งอยู่ที่เครื่องของ users เท่านั้นครับ การใช้ font จึงค่อนข้างถูกจำกัด แต่หลังจากที่ @font-face ได้ถูกเพิ่มเข้ามาใน specification ของ CSS3 การใช้ font บนเว็บก็มีความหลากหลายมากขึ้น
@font-face เป็นกลไกที่จะช่วยให้เราสามารถเรียกใช้ font ที่ไม่ได้ถูกติดตั้งไว้ที่เครื่องของ users ได้ครับ หลักการของมันก็ง่ายๆ คือมันจะทำหน้าที่เป็น “ตัวระบุ” ที่อยู่ของ “font file” ที่เราต้องการจะใช้นั่นเอง
@font-face { font-family: Helvetica; src: url('http://www.yourdomain.com/fonts/Helvetica.ttf'); } body { font-family: Helvetica; }
@font-face {
font-family: Helvetica;
src: url('http://www.yourdomain.com/fonts/Helvetica.ttf');
}
body {
font-family: Helvetica;
}
จาก ตัวอย่างนี้ ผมกลัวว่าบางคนจะไม่มี font “Helvetica” ติดตั้งเอาไว้ในเครื่อง ผมก็เลยเขียน “@font-face rule” ขึ้นมาครับ จากนี้ไป เมื่อมี elements ใดๆ ก็ตาม ที่เรียกใช้ font “Helvetica” มันก็จะไม่อ่าน font file จากเครื่องของ user คนนั้นๆ แล้วครับ แต่จะไปอ่านจาก “http://www.yourdomain.com/fonts/Helvetica.ttf” ที่เราได้ระบุเอาไว้แทน
บางคนสงสัยว่า ถ้าเราอยากจะใช้ font หลายๆ ตัว ร่วมกัน จะต้องเขียนอย่างไร? ให้เราเพิ่ม “@font-face rule” เข้าไปอีกครับ จำไว้เสมอว่าถ้าไม่มี “@font-face rule” web browsers จะหา font นั้นๆ จากเครื่องของ user เสมอ
@font-face { font-family: Helvetica; src: url('http://www.yourdomain.com/fonts/Helvetica.ttf'); } @font-face { font-family: Georgia; src: url('http://www.yourdomain.com/fonts/Georgia.ttf'); } body { font-family: Helvetica; } h1 { font-family: Georgia; }
@font-face {
font-family: Helvetica;
src: url('http://www.yourdomain.com/fonts/Helvetica.ttf');
}
@font-face {
font-family: Georgia;
src: url('http://www.yourdomain.com/fonts/Georgia.ttf');
}
body {
font-family: Helvetica;
}
h1 {
font-family: Georgia;
}
จะ เห็นว่าการใช้ “@font-face” นั้นไม่ยากเลยครับ แต่ปัญหามันอยู่ตรงที่ แต่ละ web browsers นั้น รองรับ font file ในรูปแบบ(format) ที่แตกต่างกันออกไป ถ้าดูจากตัวอย่างข้างต้น จะเห็นว่าผมใช้ font file นามสกุล “ttf” หรือ “TrueType” ครับ ซึ่ง font file ในรูปแบบนี้ เป็นที่นิยมใช้กันมาก และหาดาวน์โหลดได้ฟรีจากเว็บไซต์ต่างๆ แต่กลับพบว่ายังมีบาง web browsers ที่ไม่รองรับ font file นามสกุลนี้อยู่ดี
แล้วต้องเขียนอย่างไร ถึงจะใช้ได้ทุก Browsers?
ในสมัยก่อน web browser ที่รองรับ @font-face มีแต่ Internet Explorer เท่านั้นครับ เราจึงต้องเลือกใช้ font file ที่ IE รองรับ นั่นก็คือ รูปแบบ “eot”
@font-face { font-family: Helvetica; src: url('Helvetica.eot'); }
@font-face {
font-family: Helvetica;
src: url('Helvetica.eot');
}
ใน เวลาต่อมา web browsers ต่างๆ เริ่มรองรับ @font-face มากขึ้น แต่กลับรองรับ font file ในรูปแบบที่ไม่เหมือนกัน เราจึงต้องจัดเตรียม font file ในรูปแบบต่างๆ มาให้พร้อม เพื่อให้สามารถใช้ได้กับทุกๆ web browsers
@font-face { font-family: Helvetica; src: url('Helvetica.eot'), url('Helvetica.woff'), url('Helvetica.ttf'); }
@font-face {
font-family: Helvetica;
src: url('Helvetica.eot'), url('Helvetica.woff'), url('Helvetica.ttf');
}
จะ เห็นว่าผมได้เพิ่ม font file นามสกุล “woff” และ “ttf” เข้ามาเพิ่ม รวมทั้งหมดเป็น 3 fonts ด้วยกัน ซึ่งทำให้เราใช้ @font-face ได้เกือบจะทุก web browsers ในเวลานี้แล้ว
แต่เมื่อนำโค้ดด้านบน ไปลองเปิดด้วย IE เวอร์ชั่นที่ต่ำกว่า 9 กลับพบว่า @font-face ไม่ทำงาน ที่เป็นเช่นนี้เพราะว่า IE รุ่นเก่าๆ ยังไม่รองรับการเขียน src แบบหลาย url เรียงต่อกันครับ
จากตัวอย่างด้านบน IE รุ่นเก่าๆ จะมอง url ที่เราเขียนเรียงต่อกันเป็นเพียง url เดียว ก็คือ ‘Helvetica.eot’), url(‘Helvetica.woff’), url(‘Helvetica.ttf’ ซึ่งแน่นอนว่า url แบบนี้จะต้องไม่พบอะไร(404 Not Found) ให้เราแก้ปัญหานี้โดยการใส่ “?” ต่อจาก font file นามสกุล “eot” ของเราครับ จะได้โค้ดดังนี้
@font-face { font-family: Helvetica; src: url('Helvetica.eot?'), url('Helvetica.woff'), url('Helvetica.ttf'); }
@font-face {
font-family: Helvetica;
src: url('Helvetica.eot?'), url('Helvetica.woff'), url('Helvetica.ttf');
}
การ เพิ่ม “?” ไม่ได้ช่วยให้ IE รุ่นเก่าๆ สามารถอ่าน src แบบหลาย url เรียงต่อกันได้ครับ แต่มันจะช่วยให้ url ที่มันอ่านได้ กลายเป็น ‘Helvetica.eot?’), url(‘Helvetica.woff’), url(‘Helvetica.ttf’ โดยปกติแล้ว web browsers จะมองว่าอะไรก็ตาม ที่อยู่หลัง “?” เป็น “query string” หรือพารามิเตอร์ที่ใช้ในการ query นั่นเอง ซึ่งมันจะไม่ใช้ในการระบุที่หมาย ทำให้ url ที่เคยดูยาวๆ นั้น กลับมีค่าเหมือนเหลือแค่ ‘Helvetica.eot’ เท่านั้น ด้วยเหตุนี้เอง การใส่ “?” จึงช่วยให้ IE รุ่นเก่าๆ สามารถหา font file ได้อย่างถูกต้อง
ปัญหา ต่อมาก็คือ การระบุ src ของ font file แบบหลาย url ทำให้ web browsers ต้องดาวน์โหลด font file เหล่านั้นมาทั้งหมด แม้ว่า web browser นั้นๆ จะไม่รองรับก็ตาม จากโค้ดด้านบน IE จะดาวน์โหลด font file มาทั้งรูปแบบ “eot”, “woff” และ “ttf” ทั้งๆ ที่จริงๆ แล้ว มันใช้แค่รูปแบบ “eot” เท่านั้น font file นึงอาจมีขนาดหลายร้อย KB เท่ากับว่าเราต้องมาเสียเวลาดาวน์โหลดโดยไม่จำเป็น
วิธีแก้ปัญหานี้ ให้เราใส่ “Format Hint” เข้าไปครับ format hint จะเป็นตัวช่วยบอก web browsers ต่างๆ ว่า font file นี้ เป็น format อะไร ถ้าไม่ใช้ ก็ไม่ต้องดาวน์โหลดมานะ (format hint รองรับตั้งแต่ IE9 เป็นต้นไป) ทีนี้ web browsers ต่างๆ ก็จะรู้แล้วว่า font file ไหนควรโหลดมา และ font file ไหนควรข้ามไป
@font-face { font-family: Helvetica; src: url('Helvetica.eot?') format('embedded-opentype'), url('Helvetica.woff') format('woff'), url('Helvetica.ttf') format('truetype'); }
@font-face {
font-family: Helvetica;
src: url('Helvetica.eot?') format('embedded-opentype'),
url('Helvetica.woff') format('woff'),
url('Helvetica.ttf') format('truetype');
}
มา ถึงตอนนี้ โค้ดของเราค่อนข้างจะโอเคแล้วครับ สามารถใช้ได้กับ web browsers เกือบจะทั้งหมดแล้ว แต่ยังเหลืออีก web browser นึงครับ ที่ยังใช้ไม่ได้ นั่นก็คือ IE9 ที่อยู่ในโหมด Compatibility View โหมดนี้ถูกออกแบบมาเพื่อให้สามารถใช้ IE9 ในการดูเว็บเก่าๆ ที่เขียนมานานแล้วได้ดีขึ้น หากเราต้องการจะรองรับ IE9 ในโหมดนี้ด้วย เราจำเป็นต้องเพิ่มโค้ดเข้าไปอีกบรรทัดนึงครับ
@font-face { font-family: Helvetica; src: url('Helvetica.eot'); src: url('Helvetica.eot?') format('embedded-opentype'), url('Helvetica.woff') format('woff'), url('Helvetica.ttf') format('truetype'); }
@font-face {
font-family: Helvetica;
src: url('Helvetica.eot');
src: url('Helvetica.eot?') format('embedded-opentype'),
url('Helvetica.woff') format('woff'),
url('Helvetica.ttf') format('truetype');
}
เรา จำเป็นต้องเพิ่ม src เข้ามาอีกชุดนึง เพื่อให้ IE9 ในโหมด Compatibility View สามารถใช้ @font-face ได้ บางคนอาจบ่นว่า แค่จะให้รองรับ IE9 ในโหมด Compatibility View ถึงกับต้องเพิ่มโค้ดอีกบรรทัดเลยหรือ? เรามีวิธีแก้ครับ ให้เราเพิ่ม <meta> ค่านี้เข้าไปที่ <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
โค้ด ด้านบน จะ force ไม่ให้ IE9 อยู่ในโหมด Compatibility View ครับ แค่เราใส่โค้ดนี้ เราก็ไม่จำเป็นต้องเพิ่มโค้ดใน @font-face rule อีกบรรทัดแล้วล่ะครับ
บางคนคิดต่อ สมมติเราไม่ใส่ <meta> ดังกล่าว แล้วเลือกที่จะเพิ่มโค้ดเข้ามาอีกบรรทัด เพื่อรองรับ IE9 ในโหมด Compatibility View แล้วเรายังจะต้องใส่ font file นามสกุล “eot?” ใน src บรรทัดที่ 2 อยู่อีกมั้ย ทำไมไม่ตัดออกไปล่ะ? แบบนี้ไง
@font-face { font-family: Helvetica; src: url('Helvetica.eot'); src: url('Helvetica.woff') format('woff'), url('Helvetica.ttf') format('truetype'); }
@font-face {
font-family: Helvetica;
src: url('Helvetica.eot');
src: url('Helvetica.woff') format('woff'),
url('Helvetica.ttf') format('truetype');
}
คำตอบคือตัดออกไม่ได้ครับ จากโค้ดด้านบน จะเห็นว่า src บรรทัดแรก ระบุให้อ่าน font file ในรูปแบบ “eot” ถ้าเราเขียนแค่นี้ บรรทัดเดียว เราจะสามารถใช้ได้กับ IE ตั้งแต่เวอร์ชั่น 9 ลงมาเลยครับ(รวมถึง IE9 ในโหมด Compatibility View ด้วย) แต่เราจำเป็นต้องใส่ src บรรทัดที่สอง เพื่อให้รองรับ web browsers อื่นๆ ด้วย ซึ่ง src บรรทัดที่สองนี้เอง ที่จะไป “Override(มีผลเหนือกว่า)” src บรรทัดแรก ทำให้ web browsers ใดๆ ก็ตาม ที่จำเป็นต้องใช้ font file ในรูปแบบ “eot” จะไม่สามารถทำงานได้ เพราะที่ src บรรทัดที่สอง เราได้ตัด font file รูปแบบ “eot” ออกไป
บาง คนอาจสงสัยว่าทำไมผมถึงไม่พูดถึง font file ในรูปแบบ “SVG” เลย ลืมไปหรือเปล่า? คำตอบคือผมไม่ได้ลืมครับ แต่ตั้งใจไม่ได้ใส่เข้ามาใน @font-face-rule เนื่องจาก font file ในรูปแบบ “svg” ยังคงมี bug เกี่ยวกับการแสดงผลอยู่ และ web browsers ที่รองรับล้วนเป็น web browsers รุ่นเก่าๆ เช่น Safari บน iOS รุ่นต่ำกว่า 4 (พูดง่ายๆ คือ web browsers สมัยใหม่ หันไปรองรับรูปแบบอื่นหมดแล้ว)
อีกเรื่องนึงที่ผมก็ไม่ได้ พูดถึงเลยก็คือการระบุ src แบบ “Local” ครับ จริงๆ แล้ว การเขียน @font-face rule สามารถกำหนดให้ใช้ font file ที่อยู่ในเครื่อง local ได้(หากเครื่องนั้นได้ติดตั้ง font นั้นๆ เอาไว้อยู่แล้ว) เพื่อจะได้ไม่ต้องเสียเวลาดาวน์โหลด font นั้นๆ มาอีก เราสามารถใช้ทั้งแบบ local และแบบ url ร่วมกันได้ครับ ถ้ามันไม่พบ font file นั้นๆ ที่ local มันก็จะ fall-back มาใช้ font-file ที่ url แทน แต่วิธีระบุแบบ local นั้นมีข้อเสียอยู่ครับ เนื่องจากเราไม่สามารถแน่ใจได้ว่า font ที่ติดตั้งไว้ในเครื่องนั้นๆ จะมีหน้าตาตรงกับ font ที่เราต้องการจะใช้หรือไม่ ถึงแม้ว่ามันจะมีชื่อเดียวกันก็ตาม นอกจากนั้น ในบาง web browsers จะติดปัญหาเกี่ยวกับ “Permission” เนื่องจากเป็นการไป “เข้าถึง” ไฟล์ในเครื่องของ users อีกด้วยครับ ด้วยเหตุผลเหล่านี้ ผมจึงไม่แนะนำให้ใช้ src แบบ local เพราะโดยปกติแล้ว เมื่อ web browser ดาวน์โหลด font นั้นๆ มาใช้เพียงครั้งหนึ่ง มันก็จะเก็บ font file นั้นๆ เอาไว้ใน “Cache” ของมันอยู่แล้ว ทำให้เราไม่ต้องเสียเวลาดาวน์โหลดมาใช้ในครั้งต่อไปอีกครับ การใช้ src แบบ url จึงไม่ได้ทำให้เสียเวลากว่าแบบ local เท่าไรนัก
ใช้ @font-face เป็นแล้ว ทีนี้จะหา Download ได้จากที่ไหน?
หาก คิดจะใช้ @font-face ต้องนึกถึงเรื่องของลิขสิทธิ์ของ font เสมอครับ ถ้าเราต้องการจะใช้ font ที่มีลิขสิทธิ์ ให้เราปฏิบัติตามข้อกำหนดอย่างเคร่งครัด แต่ในสมัยนี้ มีหลายเว็บไซต์ที่ให้บริการดาวน์โหลด font ไปใช้ฟรีๆ อย่างเช่น Font Squirrel นอกจากนี้ ยังมีบริการที่จะช่วยให้เราใส่ @font-face ในหน้าเว็บของเราได้ง่ายขึ้นอย่าง Google Fonts และ TypeKit อีกด้วยครับ
รับทําเว็บไซต์ 
แลกลิงค์ 
