@font-face คืออะไร + วิธีทำให้ใช้ได้ Cross-Browser

Published in

SiamHTML

7 min readMay 26, 2013

หากพูดถึงเรื่อง “@font-face” หลายๆ คน คงจะรู้จักกันดีใช่มั้ยครับ บางคนอาจจะสงสัยว่า ผมจะเขียนบทความเรื่องนี้อีกทำไม เว็บอื่นๆ เค้าเขียนไปเยอะแล้ว แต่ผมเชื่อว่ายังมีบางคน ที่เพิ่งจะเริ่มศึกษามัน หรือบางคนที่ใช้เป็นแล้ว แต่ยังอยากรู้ที่มาของมัน บทความนี้จะช่วยคลายข้อสงสัยของหลายๆ คนได้อย่างแน่นอนครับ

@font-face rule คืออะไร?

ในสมัยก่อน font ที่เราจะใช้ได้ จะต้องติดตั้งอยู่ที่เครื่องของ users เท่านั้นครับ การใช้ font จึงค่อนข้างถูกจำกัด แต่หลังจากที่ @font-face ได้ถูกเพิ่มเข้ามาใน specification ของ CSS3 การใช้ font บนเว็บก็มีความหลากหลายมากขึ้น (สามารถอ่านประวัติเพิ่มเติมได้ที่ “ความเป็นมาของ Web Typography”)

@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 “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” นั้นไม่ยากเลยครับ แต่ปัญหามันอยู่ตรงที่ แต่ละ 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');
}

ในเวลาต่อมา 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 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');
}

การเพิ่ม “?” ไม่ได้ช่วยให้ 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');
}

มาถึงตอนนี้ โค้ดของเราค่อนข้างจะโอเคแล้วครับ สามารถใช้ได้กับ 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');
}

เราจำเป็นต้องเพิ่ม src เข้ามาอีกชุดนึง เพื่อให้ IE9 ในโหมด Compatibility View สามารถใช้ @font-face ได้ บางคนอาจบ่นว่า แค่จะให้รองรับ IE9 ในโหมด Compatibility View ถึงกับต้องเพิ่มโค้ดอีกบรรทัดเลยหรือ? เรามีวิธีแก้ครับ ให้เราเพิ่ม <meta> ค่านี้เข้าไปที่ <head>

<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');
}

คำตอบคือตัดออกไม่ได้ครับ จากโค้ดด้านบน จะเห็นว่า 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-weight และ font-style ไว้ใน @font-face rule

หลายๆ คน คงเคยเห็นมาบ้างแล้วนะครับ แต่คงมีคนสงสัยจำนวนไม่น้อย ว่าทำไมเราจึงควรใส่ font-weight และ font-style ไว้ใน @font-face rule ด้วย ไม่ใส่เป็นไรไหม? ผมมีคำตอบให้ครับ ลองมาดูตัวอย่างต่อไปนี้

@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');
}article h1{
	font-family: Helvetica;
	font-weight: bold;
}
article p{
	font-family: Helvetica;
}
article em{
	font-family: Helvetica;
	font-style: italic;
}
จากโค้ดด้านบน ที่ @font-face rule เราใช้ font เพียง font เดียวก็คือ "Helvetica" และเมื่อดูที่ h1 เรากำหนด font-weight ให้มีค่าเป็น bold การเขียนแบบนี้ จะเป็นการบอกให้ web browser "สังเคราะห์(สร้าง)" font "Helvetica" แบบ "bold" ขึ้นมาแสดงผล ส่วนที่ p เราไม่ได้ปรับแต่งสไตล์ให้กับ font เลย web browser จึงแสดง font "Helvetica" แบบเดิมๆ และสุดท้ายที่ em จะคล้ายกับที่ h1 คือ web browser จะสังเคราะห์ font "Helvetica" แบบ "italic" ขึ้นมาแสดงผลสาเหตุที่ web browser จำเป็นต้อง "สังเคราะห์" font "Helvetica" ในลักษณะต่างๆ ขึ้นมาก็เพราะว่า เราไม่ได้ "ระบุ" font file ที่มีลักษณะนั้นๆ เอาไว้ใน "@font-face rule" นั่นเองครับ ซึ่ง font ที่สังเคราะห์ขึ้นมาด้วย "Algorithm" นั้น จะไม่คมชัดและสมบูรณ์เท่ากับ font ที่ designer ได้ออกแบบมาจริงๆ วิธีแก้คือ ให้เราเตรียม font ตระกูล Helvetica ในลักษณะต่างๆ มาให้ครบ ดังตัวอย่างต่อไปนี้ครับ@font-face {
    font-family: HelveticaRegular;
    src: url('HelveticaRegular.eot');
    src: url('HelveticaRegular.eot?') format('embedded-opentype'), 
         url('HelveticaRegular.woff') format('woff'), 
         url('HelveticaRegular.ttf') format('truetype');
}@font-face {
    font-family: HelveticaBold;
    src: url('HelveticaBold.eot');
    src: url('HelveticaBold.eot?') format('embedded-opentype'), 
         url('HelveticaBold.woff') format('woff'), 
         url('HelveticaBold.ttf') format('truetype');
}@font-face {
    font-family: HelveticaItalic;
    src: url('HelveticaItalic.eot');
    src: url('HelveticaItalic.eot?') format('embedded-opentype'), 
         url('HelveticaItalic.woff') format('woff'), 
         url('HelveticaItalic.ttf') format('truetype');
}article h1 {
	font-family: HelveticaBold;
}
article p {
	font-family: HelveticaRegular;
}
article em {
	font-family: HelveticaItalic;
}
จะเห็นว่าผมได้เตรียม font ตระกูล Helvetica มาถึง 3 ลักษณะด้วยกัน ได้แก่ "HelveticaRegular", "HelveticaBold" และ "HelveticaItalic" เพื่อใช้แทน ตัวปกติ ตัวหนา และตัวเอียง ตามลำดับ แต่สังเกตดีๆ นะครับ ที่ h1 และ em ผมได้ตัด font-weight:bold และ font-style:italic ออกไปแล้ว เนื่องจากตัว font "HelveticaBold" และ "HelveticaItalic" มีลักษณะที่ผมต้องการอยู่แล้ว ไม่จำเป็นต้อง "สังเคราะห์" ลักษณะนั้นขึ้นมาอีกต่อไป ผลที่ได้คือตัวหนังสือมีความคมชัดมากขึ้น ไม่ผิดเพี้ยนเหมือนตอนแรกครับ

ถ้าสังเกตุดีๆ จะเห็นว่า font แท้ๆ จะคมชัดกว่า font ที่สังเคราะห์ขึ้นด้วย algorithmแต่ปัญหาก็เกิดขึ้นอีกจนได้ครับ เพราะบาง web browsers นั้น จะไป "สังเคราะห์" ลักษณะพิเศษให้กับ font ของเรา โดยอัตโนมัติ จากโค้ดด้านบน แม้เราไม่ได้ใส่ font-weight:bold ที่ h1 แต่ web browsers จะ "สังเคราะห์" font เวอร์ชั่นตัวหนาให้กับ font ของเราโดยอัตโนมัติครับ ส่งผลให้ font "HelveticaBold" ของเรา ตัวหนากว่าปกติ(เดิมก็ตัวหนาอยู่แล้ว) วิธีแก้คือให้เราเพิ่ม font-weight: normal เข้าไปด้วยครับ และในทำนองเดียวกัน ให้เราเพิ่ม font-style: normal ที่ em ด้วยครับ เพื่อเป็นการบังคับ ไม่ให้ web browser ไปเพิ่มลักษณะที่เราไม่ต้องการซ้ำเข้าไปอีกarticle h1 {
    font-family: HelveticaBold;
    font-weight: normal;
}
article p {
    font-family: HelveticaRegular;
}
article em {
    font-family: HelveticaItalic;
    font-style: normal;
}จะเห็นว่าเราต้องมาคอยรีเซทค่า font-weight และ font-style ให้กลับมาเป็น normal อยู่ตลอด ซึ่งมันค่อนข้างจะยุ่งยากไปสักหน่อย แต่เรามีวิธีแก้ครับ ให้เราลองมองย้อนกลับไป สิ่งที่เราเขียนเพื่อระบุที่อยู่ของ font file นั้น มีชื่อเรียกว่า "@font-face rule" อย่าลืมนะครับว่ามันคือ "Rule" หรือ "ข้อกำหนด" นั่นเอง หลักการของ "@font-face rule" ก็คือ มันจะดูว่า font ที่เราเลือกใช้นั้นตรงกับ rule ไหนมั้ย? ถ้าตรงกับ rule ที่เรากำหนดไว้ มันก็จะ "apply" rule นั้นๆ ลองมาดู @font-face rules ที่ผมได้เปลี่ยนใหม่ตามด้านล่างนี้ครับ@font-face {
    font-family: Helvetica;
    src: url('HelveticaRegular.eot');
    src: url('HelveticaRegular.eot?') format('embedded-opentype'),
         url('HelveticaRegular.woff') format('woff'),
         url('HelveticaRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}@font-face {
    font-family: Helvetica;
    src: url('HelveticaBold.eot');
    src: url('HelveticaBold.eot?') format('embedded-opentype'),
         url('HelveticaBold.woff') format('woff'),
         url('HelveticaBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}@font-face {
    font-family: Helvetica;
    src: url('HelveticaItalic.eot');
    src: url('HelveticaItalic.eot?') format('embedded-opentype'),
         url('HelveticaItalic.woff') format('woff'),
         url('HelveticaItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
ลองสังเกต @font-face rules ของผมนะครับ จะพบว่าทั้ง 3 rules นั้น ผมกำหนด font-family เป็น "Helvetica" เหมือนกันหมด(ไม่มี Regular, Bold หรือ Italic ต่อท้ายแล้ว) แต่จะกำหนด src ของ font แตกต่างกันไป คือ "HelveticaRegular", "HelveticaBold" และ "HelveticaItalic" ตามลำดับ นอกจากนั้น ในแต่ละ rules ผมยังกำหนด font-weight และ font-style ให้ตรงตามลักษณะของ font นั้นๆ อีกด้วยครับจาก @font-face rule ด้านบน จะได้ว่า เมื่อมีการเรียกใช้ font-family: Helvetica ที่ elements ใดๆ font "HelveticaRegular" จะถูกนำมาใช้ แต่ถ้า element นั้นๆ กำหนด font-weight เป็น bold เอาไว้ font "HelveticaBold" จะถูกนำมาใช้แทน ในทำนองเดียวกัน font "HelveticaItalic" ก็จะถูกนำมาใช้แทน หาก element นั้นๆ ถูกกำหนด font-style ให้เป็น italic ลองมาดูตัวอย่างการใช้งานจริงของ @font-face rules แบบนี้กันเลยครับarticle {
    font-family: Helvetica;
}
article h1 {
    font-weight: bold;
}
article p {}
article em{
    font-style: italic;
}
จะเห็นว่าการนำไปใช้งานจริงนั้นง่ายขึ้นกว่าเดิมเยอะเลยครับ วิธีนี้นอกจากเขียนได้ง่ายขึ้นแล้ว ยังมีประโยชน์ในกรณีที่ web browser ไม่สามารถโหลด font ที่ต้องการได้ด้วยเหตุผลบางประการ การแสดงผลจะยังคงดูสมเหตุสมผล คือแสดงตัวหนาที่ h1 และตัวเอียงที่ em ต่างจากการเขียน @font-face rules แบบเดิม ที่ต้องไปใส่ font-weight และ font-style ให้เป็น normal ทำให้การแสดงผลที่ออกมานั้น ผิดเพี้ยนจากที่เราตั้งใจเอาไว้ใช้ @font-face เป็นแล้ว ทีนี้จะหา Download ได้จากที่ไหน?หากคิดจะใช้ @font-face ต้องนึกถึงเรื่องของลิขสิทธิ์ของ font เสมอครับ ถ้าเราต้องการจะใช้ font ที่มีลิขสิทธิ์ ให้เราปฏิบัติตามข้อกำหนดอย่างเคร่งครัด แต่ในสมัยนี้ มีหลายเว็บไซต์ที่ให้บริการดาวน์โหลด font ไปใช้ฟรีๆ อย่างเช่น Font Squirrel นอกจากนี้ ยังมีบริการที่จะช่วยให้เราใส่ @font-face ในหน้าเว็บของเราได้ง่ายขึ้นอย่าง Google Fonts และ TypeKit อีกด้วยครับ

บทสรุปเกี่ยวกับการใช้ @font-face

@font-face rule ที่ทำให้ใช้ได้ในทุกๆ web browsers@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 rule ในการใช้งานจริง@font-face {
    font-family: Helvetica;
    src: url('HelveticaRegular.eot');
    src: url('HelveticaRegular.eot?') format('embedded-opentype'),
         url('HelveticaRegular.woff') format('woff'),
         url('HelveticaRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}@font-face {
    font-family: Helvetica;
    src: url('HelveticaBold.eot');
    src: url('HelveticaBold.eot?') format('embedded-opentype'),
         url('HelveticaBold.woff') format('woff'),
         url('HelveticaBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}@font-face {
    font-family: Helvetica;
    src: url('HelveticaItalic.eot');
    src: url('HelveticaItalic.eot?') format('embedded-opentype'),
         url('HelveticaItalic.woff') format('woff'),
         url('HelveticaItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
ตัวอย่างการกำหนด styles ที่ elements ต่างๆarticle {
    font-family: Helvetica;
}
article h1 {
    font-weight: bold;
}
article p {}
article em {
    font-style: italic;
}

@font-face คืออะไร + วิธีทำให้ใช้ได้ Cross-Browser

@font-face rule คืออะไร?

แล้วต้องเขียนอย่างไร ถึงจะใช้ได้ทุก Browsers?

กำหนด font-weight และ font-style ไว้ใน @font-face rule

บทสรุปเกี่ยวกับการใช้ @font-face

Written by Suranart Niamcome