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

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

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

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

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

จากตัวอย่างนี้ ผมกลัวว่าบางคนจะไม่มี 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” นั้นไม่ยากเลยครับ แต่ปัญหามันอยู่ตรงที่ แต่ละ 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”

ในเวลาต่อมา web browsers ต่างๆ เริ่มรองรับ @font-face มากขึ้น แต่กลับรองรับ font file ในรูปแบบที่ไม่เหมือนกัน เราจึงต้องจัดเตรียม font file ในรูปแบบต่างๆ มาให้พร้อม เพื่อให้สามารถใช้ได้กับทุกๆ web browsers

จะเห็นว่าผมได้เพิ่ม 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” ของเราครับ จะได้โค้ดดังนี้

การเพิ่ม “?” ไม่ได้ช่วยให้ 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 ไหนควรข้ามไป

มาถึงตอนนี้ โค้ดของเราค่อนข้างจะโอเคแล้วครับ สามารถใช้ได้กับ web browsers เกือบจะทั้งหมดแล้ว แต่ยังเหลืออีก web browser นึงครับ ที่ยังใช้ไม่ได้ นั่นก็คือ IE9 ที่อยู่ในโหมด Compatibility View โหมดนี้ถูกออกแบบมาเพื่อให้สามารถใช้ IE9 ในการดูเว็บเก่าๆ ที่เขียนมานานแล้วได้ดีขึ้น หากเราต้องการจะรองรับ IE9 ในโหมดนี้ด้วย เราจำเป็นต้องเพิ่มโค้ดเข้าไปอีกบรรทัดนึงครับ

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

โค้ดด้านบน จะ force ไม่ให้ IE9 อยู่ในโหมด Compatibility View ครับ แค่เราใส่โค้ดนี้ เราก็ไม่จำเป็นต้องเพิ่มโค้ดใน @font-face rule อีกบรรทัดแล้วล่ะครับ

บางคนคิดต่อ สมมติเราไม่ใส่ <meta> ดังกล่าว แล้วเลือกที่จะเพิ่มโค้ดเข้ามาอีกบรรทัด เพื่อรองรับ IE9 ในโหมด Compatibility View แล้วเรายังจะต้องใส่ font file นามสกุล “eot?” ใน src บรรทัดที่ 2 อยู่อีกมั้ย ทำไมไม่ตัดออกไปล่ะ? แบบนี้ไง

คำตอบคือตัดออกไม่ได้ครับ จากโค้ดด้านบน จะเห็นว่า 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 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 ตระกูล Helvetica มาถึง 3 ลักษณะด้วยกัน ได้แก่ “HelveticaRegular”, “HelveticaBold” และ “HelveticaItalic” เพื่อใช้แทน ตัวปกติ ตัวหนา และตัวเอียง ตามลำดับ แต่สังเกตดีๆ นะครับ ที่ h1 และ em ผมได้ตัด font-weight:bold และ font-style:italic ออกไปแล้ว เนื่องจากตัว font “HelveticaBold” และ “HelveticaItalic” มีลักษณะที่ผมต้องการอยู่แล้ว ไม่จำเป็นต้อง “สังเคราะห์” ลักษณะนั้นขึ้นมาอีกต่อไป ผลที่ได้คือตัวหนังสือมีความคมชัดมากขึ้น ไม่ผิดเพี้ยนเหมือนตอนแรกครับ

font synthesis comparison

ถ้าสังเกตุดีๆ จะเห็นว่า 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 ไปเพิ่มลักษณะที่เราไม่ต้องการซ้ำเข้าไปอีก

จะเห็นว่าเราต้องมาคอยรีเซทค่า font-weight และ font-style ให้กลับมาเป็น normal อยู่ตลอด ซึ่งมันค่อนข้างจะยุ่งยากไปสักหน่อย แต่เรามีวิธีแก้ครับ ให้เราลองมองย้อนกลับไป สิ่งที่เราเขียนเพื่อระบุที่อยู่ของ font file นั้น มีชื่อเรียกว่า “@font-face rule” อย่าลืมนะครับว่ามันคือ “Rule” หรือ “ข้อกำหนด” นั่นเอง หลักการของ “@font-face rule” ก็คือ มันจะดูว่า font ที่เราเลือกใช้นั้นตรงกับ rule ไหนมั้ย? ถ้าตรงกับ rule ที่เรากำหนดไว้ มันก็จะ “apply” rule นั้นๆ ลองมาดู @font-face rules ที่ผมได้เปลี่ยนใหม่ตามด้านล่างนี้ครับ

ลองสังเกต @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 แบบนี้กันเลยครับ

จะเห็นว่าการนำไปใช้งานจริงนั้นง่ายขึ้นกว่าเดิมเยอะเลยครับ วิธีนี้นอกจากเขียนได้ง่ายขึ้นแล้ว ยังมีประโยชน์ในกรณีที่ 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 rule ในการใช้งานจริง

ตัวอย่างการกำหนด styles ที่ elements ต่างๆ

(Visited 29,132 times, 17 visits today)

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

  1. Khonyuen says:

    ขอบคุณสำหรับความรู้นี้ครับ มีแต่ใช้แต่ไม่เคยรู้ว่ามันมาจากที่ใดเลย อิอิ

    • Siam HTML says:

      จะว่าไป การรู้ที่มามันก็ไม่ได้ช่วยให้งานดีขึ้นเท่าไรครับ แต่แอดมินขี้สงสัยก็เลยไล่ทดลองไปเรื่อยๆ พอเจออะไรดีๆ ก็เอามาเล่าสู่กันฟังฮะ ^_^

      • พิสิฏฐ์ เพิ่มมงคล says:

        ขอบคุณมากมายที่ท่านได้ให้ความรู้ครับ ผมจึงได้นำ Code ดังกล่าวไปประยุกใช้ และก็ได้พบปัญหาครับ หลังจากที่เขียนเสร็จก็นำไปทดลองกับ Browser ต่างๆ ดังนี้ครับ

        IE V. 11.0.9 แสดงตัวอักษรได้ดังใจครับ สวยมาก
        Firefox V. 30.0 แบบอักษร ไม่ทำงาน
        Google Chrome V. 35.0.1916.153 m แบบอักษร ไม่ทำงาน
        Opera V. 22.014 แบบอักษร ไม่ทำงาน
        Safari V 5.1.7 แบบอักษร ไม่ทำงาน
        Android 4.4.2 แบบอักษร ไม่ทำงาน
        IOS 7.1.1 แบบอักษร ไม่ทำงาน

        แบบอักษรที่ผมใช้คือ EakWansikaUNI เป็นตัวอักษรภาษาไทยที่มีการตวัดเล่นหาง ภาษาอังกฤษก็เช่นกันครับ

        โดยที่ผมได้ file eak_wansika.TTF มา แล้วผมก็ใช้การ Convert โดย http://onlinefontconverter.com
        จึงได้ File eak_wansika นามสกุลต่างๆมาครบ

        ทำการเขียน file css ขึ้นมา 1 file ภายใน File มีรายละเอียดดังนี้

        @font-face {
        font-family: ‘EakWansikaUNISVG';
        url(‘../../security/fonts/EakWansikaUNI.svg#EakWansikaUNI’) format(‘svg’);
        font-weight: normal;
        font-style: normal;
        }

        @font-face {
        font-family: ‘EakWansikaUNI';
        src: url(‘../../security/fonts/EakWansikaUNI.eot’);
        src: url(‘../../security/fonts/EakWansikaUNI.eot?#iefix’) format(‘embedded-opentype’),
        url(‘../../security/fonts/EakWansikaUNI.woff’) format(‘woff’),
        url(‘../../security/fonts/EakWansikaUNI.ttf’) format(‘truetype’),
        font-weight: normal;
        font-style: normal;
        }

        body{
        font-family: ‘EakWansikaUNISVG’,’EakWansikaUNI';
        font-size: 100%;
        }

        อยากจะทราบว่าปัญหาเกิดจากเขียน Code ผิดพลาดหรือไม่ครับ ทำให้ font face ใช้งานไม่ได้ทุก Browser

        • Siam HTML says:

          เอางี้ได้มั้ยครับ
          รบกวนส่ง font file ตัวต้นฉบับให้ผมไปลองเทสดู
          ได้ผลอย่างไร จะรีบตอบทันทีครับ
          (ส่งทาง Inbox ที่แฟนเพจ หรือ siamhtml@gmail.com ก็ได้นะครับ)

          • พิสิฏฐ์ เพิ่มมงคล says:

            ผมส่ง font file ตัวต้นฉบับให้ทาง siamhtml@gmail.com ครับ

          • Siam HTML says:

            ผมได้ไฟล์แล้วนะครับ ขอเวลาเทสสักครู่ครับ

          • พิสิฏฐ์ เพิ่มมงคล says:

            ขอโทษคุณ Siam HTML นะครับ ที่ทำให้ท่านลำบาก Code ของท่านนั้นถูกต้องและดีที่สุดแล้วครับ
            ความผิดพลาดที่เกิดขึ้นมาจากผมเองครับ
            ปัญหาเกิดจาก ตกเครื่องหมาย เซมิโคลอน ” ; ” ไปอันเดียวครับ
            ที่ url(‘../../security/fonts/EakWansikaUNI.ttf’) format(‘truetype’),
            ผมใส่ คอมม่า ตบท้าย ซึ่งมันไม่ใช่ ต้องเป็น ; เพื่อจบคำสั่ง

            ขอบคุณมากนะครับ ที่ท่าน Siam HTML ให้ความรู้กับผมครับ

          • พิสิฏฐ์ เพิ่มมงคล says:

            การที่ตกเครื่องหมาย ; ไปเพื่อบอกให้จบคำสั่งนั้น IE Browser ดันเข้าใจ และ Run ได้ปกติ ส่วน Browser อื่นๆ ไม่ RUN

            IE มันเก่งแบบหมกเม็ดใช่ป่าวครับ ทำให้ผมเข้าใจผิดว่า Code ถูก เพราะว่ามัน RUN ได้

          • Siam HTML says:

            อาจจะไม่ใช้แบบนั้นครับ
            หากเราลืมใส่ ; ปิดท้าย มันจะไปอ่าน src แค่ชุดแรก ซึ่งก็คือ .eot ที่ IE รองรับครับ มันก็เลยใช้ได้แต่ IE ครับ

          • Siam HTML says:

            ไม่เปนไรๆครับผม ^_^
            พอดีจะเข้ามาบอกผลเทสว่าผมลองแล้วใช้ได้ปกตินะครับ
            ซึ่งตอนนี้คุณ พิสิฏฐ์ เพิ่มมงคล ก็ใช้ได้แล้ว ยินดีด้วยนะครับ

          • พิสิฏฐ์ เพิ่มมงคล says:

            ขอบคุณครับ ท่านเก่งจริงๆ มิน่า siamhtml.com จึงมี page rank สูง เป็นเวปไซต์ที่มีความนิยมสูง ถึงได้ครองหน้าหนึ่ง Google Search ในด้านเวปโปรแกรมเมอร์มาตลอดนะครับ สุดยอด เก่งจริงๆครับขอบอก..ขอให้ท่านและครอบครัวจงมีความเจริญก้าวหน้ายิ่งๆขึ้นไปนะครับ ทำเพื่อประเทศชาติครับ ผมรักผู้ให้ครับ สู้ๆ

  2. Vanzkung says:

    ความรู้สุดๆ อะครับ… เคยแต่นำไปใช้… แต่ไม่เคยได้อ่านแบบนี้เลย ขอบคุณครับ :)

    • Siam HTML says:

      ขอบคุณมากๆ ครับ ที่เห็นคุณค่าของบทความนี้ ^_^

  3. Apo says:

    สวัสดีค่ะ คือว่ามีปัญหา ใช้ font-face กับภาษาไทย จะแสดงผลปกติในทุก browser แต่ถ้าเปิดในมือถือ หรือ แท็บเล็ต ที่เป็น android จะไม่อ่าน font-face เลย กลายเป็นฟอนต์ธรรมดาไป

    เขียนไว้แบบนี้ค่ะ

    @font-face {
    font-family: ‘DBOzoneXRegular';
    src: url(‘db_ozone_x-webfont.eot’);
    src: url(‘db_ozone_x-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘db_ozone_x-webfont.woff’) format(‘woff’),
    url(‘db_ozone_x-webfont.ttf’) format(‘truetype’),
    url(‘db_ozone_x-webfont.svg#DBOzoneXRegular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;}

    ไม่ทราบว่ามีวิธีแก้ไขหรือป่าวคะ ขอบคุณมากค่ะ

    • Siam HTML says:

      ลองแยก rule สำหรับ svg ต่างหากดูนะครับ
      @font-face {
      font-family: ‘DBOzoneXRegularSVG';
      url(‘db_ozone_x-webfont.svg#DBOzoneXRegular’) format(‘svg’);
      font-weight: normal;
      font-style: normal;
      }
      @font-face {
      font-family: ‘DBOzoneXRegular';
      src: url(‘db_ozone_x-webfont.eot’);
      src: url(‘db_ozone_x-webfont.eot?#iefix’) format(‘embedded-opentype’),
      url(‘db_ozone_x-webfont.woff’) format(‘woff’),
      url(‘db_ozone_x-webfont.ttf’) format(‘truetype’);
      font-weight: normal;
      font-style: normal;
      }
      body {
      font-family: ‘DBOzoneXRegularSVG’, ‘DBOzoneXRegular';
      }

      • Apo says:

        ทำได้แล้วค่ะ ทำไมถึงต้องแยกแบบนี้ด้วยคะ svg มีคุณสมบัติพิเศษแบบไหนหรอค่ะ
        ขอบคุณมากๆ ค่ะ สำหรับคำแนะนำ ลดงานไปได้อีกอย่างแล้ว เฮ้อ สบายใจ ^__^

        • Siam HTML says:

          ที่แยกแล้วได้ผลเป็นเพราะว่า default browser ใน android บางรุ่นจะใช้ได้แต่ svg น่ะครับ
          การแยก rule เหมือนเป็นการบังคับให้มันอ่าน font svg ก่อน ซึ่งพอมันอ่านได้ มันก็จะเลิกอ่าน font แบบอื่นทันที
          ในขณะที่ browser ที่ไม่ support svg จะข้าม rule แรกไป และไปใช้ rule ที่ 2 แทนครับ

        • Siam HTML says:

          เนื่องจาก default browser ใน android บางรุ่น อ่านได้แต่ font แบบ svg ครับ
          การแยก rule ออกเป็น 2 rules เหมือนเป็นการบังคับให้มันอ่าน font แบบ svg ก่อน
          ถ้าอ่านออกก็เอาไปใช้เลย ไม่ต้องไปเช็คอะไรอีก
          แต่ถ้าอ่านไม่ออก ให้ข้ามไปดู rule ที่ 2 ที่เราใส่ไว้ทั้ง eot, woff, ttf ซึ่ง browsers อื่นๆ จะรองรับ font เหล่านี้ครับ

          • Apo says:

            เข้าใจแล้วค่ะ เพิ่งจะเห็นประโยชน์ของ svg วันนี้เอง ต้องศึกษาหาให้มากกว่านี้แล้วล่ะ
            ขอบคุณมากๆ นะคะ แอดมินผู้ใจดี ^__^

          • Siam HTML says:

            ยินดีครับ มีไรมาแชร์กันที่แฟนเพจได้นะครับ ^0^

          • นัท says:

            ผมมีปัญหาเช่นกันกับ default browser ของ android บางรุ่น

            font ถูกโหลด ภาษาอังกฤษแสดง font ถูกต้อง แต่ภาษาไทยกลับใช้ default font ส่วน platform อื่นๆแสดงผลถูกต้องหมด งง ว่าเกิดจากอะไร ผมใช้ code ดังนี้ครับ

            @font-face {
            font-family: ‘suvhumvitSVG';
            url(‘fonts/suvhumvit.svg#suvhumvit’) format(‘svg’);
            font-weight: normal;
            font-style: normal;
            }
            @font-face {
            font-family: ‘suvhumvit';
            src: url(‘fonts/suvhumvit.eot’);
            src: url(‘fonts/suvhumvit.eot?#iefix’) format(‘embedded-opentype’),
            url(‘fonts/suvhumvit.woff’) format(‘woff’),
            url(‘fonts/suvhumvit.ttf’) format(‘truetype’);
            font-weight: normal;
            font-style: normal;
            }
            .suvhumvit
            {
            font-family: ‘suvhumvitSVG’, ‘suvhumvit';
            }

            ขอบคุณครับ

          • Siam HTML says:

            ผมคิดว่าน่าจะเป็นที่ browser นั้นยังไม่รองรับ font-face ภาษาไทยนะครับ ถ้ารองรับแล้ว เขียนแบบนี้น่าจะได้แล้วอะครับ

          • นัท says:

            ขอบคุณครับ

  4. nui says:

    อยากทราบว่า font-face ภาษาไทย ใช้กับ firefox ได้ไหมคับ เพราะผมลองทำแล้วมันไม่ขึ้นอ่ะคับ แต่ browser อื่น(chrome/ie/safari) ไม่มีปัญหาคับ พอจะมีวิธแก้ไขไหมคับ ผมลองเขียนยัดลง html ก้อไม่ได้คับ

    ปล. ผมลงครบทุกนามสกุลที่แปลงมาเป็น font-face แล้วรวมถึง woff ด้วยคับ
    ขอบคุณล่วงหน้าคับ

    • Siam HTML says:

      ใช้กับ os อะไรครับ ปกติบน desktop ใช้กับ firefox ไม่มีปัญหานะครับ ที่มีมักจะเป็นพวก android มากกว่าที่มักจะมีปัญหากับภาษาไทย

      • Nui Kunawut says:

        ผม coding และเทสบน pc คับ
        firefox ver.25.0.1
        หรือ ผมอาจจะเขียนไหร่ผิดไปแน่เลย แต่ผมเคย code อีกเว็บนึง font-face ใช้ได้ แต่เว็บนั้นไม่ได้ใช้ภาษาไทยคับ ก้อเลยไม่เจอปัญหา

        • Siam HTML says:

          ปัญหาเกิดจาก fontsquirrel ยังไม่สามารถแปลง font ที่เป็น non-Latin ได้ครับ(ยังไม่รองรับการแปลง font-face ภาษาไทย)
          คุณ Nui Kunawut ลองใช้เว็บนี้แปลงดูฮะ
          http://onlinefontconverter.com/
          เมื่อได้ไฟล์ eot, woff, ttf, svg มาครบ ให้ลองใหม่อีกทีก็น่าจะได้แล้วครับ

          • Nui Kunawut says:

            ขอบคูณมากคับ เดียวไปลองดูคับ ^^

  5. ิิิBur Free-For-All says:

    ขอบคุณมากคับ ไม่เคยรู้มาก่อน ความรู้ใหม่เลยคับ

  6. Pon says:

    แอดมินครับ font Thai sans neue ที่แอดมนใช้อะครับ ผม Generate ด้วย fontsquirrel พอเอาไปใช้มันมีปัญหาวรรณยุกต์ซ้อน เช่นคำว่า น้ำ แอดมินมีวิธีแก้ยังไงครับ ขอบคุณครับผม

    • Siam HTML says:

      ผมไม่ได้ใช้ fontsquirrel แปลงอะครับ เพราะเหมือนมันค่อนข้างจะมีปัญหากับ font ที่เป็น non-latin อะครับ ผมเลยใช้เว็บอื่นที่รองรับภาษาไทยมาแปลงเอาครับ ถ้าจำไม่ผิดน่าจะใช้ตัวนี้ฮะ ลองดูนะครับ
      http://onlinefontconverter.com/

  7. สงสัยจุง says:

    สอบถามค่ะ ทำไมฟ้อนในเว็บ ไทยรัฐ ดูคมชัดเหมือนฟ้อนที่เปิดใน ps เรยคะ แต่พอเราทำออกมาจะเป็น หยักๆ

  8. Cifa Pra says:

    เป็นบทความที่ละเอียดและเป็นประโยชน์มากๆครับ

  9. ละเอียดมาก ขอบคุณจ่ะ

  10. ขอบคุณมาก มาก ครับ

  11. ละเอียดสุดยอด ขอบคุณครัฟ

  12. ขอบคุณมากครับ มีประโยชน์มาก

  13. ถามหน่อยครับ ฟ็อนต์ไทย เล็กกว่า @font-face อื่นๆ ทำยังไงถึงจะขยายได้ตั้งแต่ default ครับ

  14. ลองใส่ unicode-range: U+0E00–U+0E7F; ที่ @font-face rule แล้วกำหนด font-size ดูอะฮะ

Leave a Reply