Webfont ภาษาไทย จัดการให้ใช้งานได้ทุก Browser

<h3>Webfont ภาษาไทย จัดการให้ใช้งานได้ทุก Browser<&sol;h3>&NewLine;<p><&sol;br><&sol;p>&NewLine;<p>ต้องเข้าใจว่าปัจจุบันมีจำนวนเบราว์เซอร์ให้ผู้ใช้งานอินเตอร์เนตเลือกใช้งานอยู่หลายค่ายและแต่ละเบราว์เซอร์มีมาตรฐาน<br &sol;>&NewLine;การจัดการกับการแสดงผลที่แตกต่างกัน ค่า CSS Default ของแต่ละเบราว์เซอร์ก็มีความแตกต่างกัน จะเห็นได้ถ้าเรา<br &sol;>&NewLine;เปิดเว็บไซต์หน้าเดียวกันแต่คนละเบราว์เซอร์ขนาดของฟอนต์หรือ font-size หรือระยะห่างระหว่างบรรทัด line-height<br &sol;>&NewLine;<&excl;--more--><&sol;p>&NewLine;<p>จะมีความแตกต่างกันอยู่ นอกจาก browser บนเครื่องคอมพิวเตอร์แล้วการพัฒนาเว็บไซต์ให้แสดงผลฟอนต์อย่างสวยงามและ<br &sol;>&NewLine;ตรงตามที่ดีไซเนอร์ได้ออกแบบมา ยังต้องคำนึงถึงการแสดงผลบนอุปกรณ์สมาร์ทโฟนอีก เห็นไหมละครับว่าการพัฒนาเว็บไซต์<br &sol;>&NewLine;ดี ๆ ซักเว็บไซต์หนึ่ง ไม่ไช่เรื่องง่ายเลย ทีนี้ลองไปดูกันครับว่าเราจะสามารถทำให้ฟอนต์สามารถรองรับการแสดงผลได้<br &sol;>&NewLine;ในทุก ๆ อุปกรณ์และทุก ๆ เบราว์เซอร์ได้ด้วยวิธีไหน<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>ประเภทของ Font<&sol;h4>&NewLine;<ul>&NewLine;<li><strong>TrueType<&sol;strong><&sol;li>&NewLine;<p>คือมาตรฐานของตัวอักษรทั้งหมดที่อยู่ในรูปแบบดิจิตอลหรือเครื่องคอมพิวเตอร์ ถูกคิดค้นโดยบริษัทแอปเปิ้ลและต่อมาก็เปิด<br &sol;>&NewLine;ให้บริษัท Microsoft และบริษัทอื่น ๆ นำไปพัฒนา จากที่ใช้งานได้เฉพาะในระบบปฏิบัติการ Mac OS ต่อมาก็สามารถใช้ได้<br &sol;>&NewLine;ในระบบปฏิบัติการ Window ด้วย<&sol;p>&NewLine;<li><strong>OpenType<&sol;strong><&sol;li>&NewLine;<p>คือมาตรฐานใหม่ของตัวอักษรทั้งหมดที่อยู่ในรูปแบบดิจิตอลหรือเครื่องคอมพิวเตอร์ เป็นการพัฒนาร่วมกันของ Adobe และ<br &sol;>&NewLine;บริษัท Microsoft สามารถรองรับการทำงานบนระบบปฏิบัติการทั้ง Mac OS และระบบปฏิบัติการ Window โดยไม่ต้อง<br &sol;>&NewLine;แปลงข้อมูล มีความสามารถทมากขึ้น มีการรองรับอักขระที่หลากหลายและมากกว่ารุ่นก่อนคือ TrueType&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ประเภทของ Webfont<&sol;h4>&NewLine;<ul>&NewLine;<li><strong>WOFF &sol; WOFF2 ย่อมาจาก Web Open Font Format <&sol;strong><&sol;li>&NewLine;<p>ถูกพัฒนาขึ้นโดยบริษัท Mozilla Corporation &lpar; ผู้พัฒนาเบราว์เซอร์ Firefox &rpar; เป็นรูปแบบ Webfont ที่โหลดเร็ว<br &sol;>&NewLine;กว่าแบบอื่น ๆ และเป็นรูปแบบ webfont ที่หลาย ๆ เบราว์เซอร์จะใช้งานเพื่อให้เป็นมาตรฐานหลัก WOFF2 เป็นเวอร์ชั่น<br &sol;>&NewLine;ใหม่และยังมีหลาย ๆ เบราว์เซอร์ไม่สามารถใช้งานได้เช่น Safari&comma;IE และบน iOS<&sol;p>&NewLine;<li><strong>SVG &sol; SVGZ ย่อมาจาก Scalable Vector Graphics &lpar;Font&rpar;<&sol;strong><&sol;li>&NewLine;<p>เป็นรูปแบบ Webfont แบบ Vector file มีขนาดไฟล์เล็กเหมาะกับการใช้งานสำหรับ Mobile รองรับการทำงาน<br &sol;>&NewLine;สำหรับ iOS แต่ไม่รองรับการทำงานบน Firefox&comma; IE และ IE Mobile ส่วน SVGZ คือไฟล์ &period;zip ของ SVG นั่นเอง<&sol;p>&NewLine;<li><strong>EOT ย่อมาจาก Embedded Open Type<&sol;strong><&sol;li>&NewLine;<p>เป็นรูปแบบ Webfont ที่ถูกสร้างขึ้นโดยบริษัท Microsoft และเพื่อรองรับการทำงานของ IE Browser เท่านั้น นั่นหมาย<br &sol;>&NewLine;ความว่า ถ้าเราพัฒนาเว็บไซต์ขึ้นมาจะใช้งาน font-face ต้องมีเจ้าตัวนี้อยู่ด้วย ฟอนต์เราถึงจะแสดงผลใน IE ได้&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>จะใช้ Webfont อย่างไรให้รองรับทุก Browser<&sol;h4>&NewLine;<p>ตอนที่เราเขียน font-face ใน CSS เราต้องทำการเรียกใช้งานไฟล์ฟอนต์ในทุก ๆ type เพื่อให้แน่ใจว่าเมื่อเว็บไซต์<br &sol;>&NewLine;ของเราถูกเปิดใช้งานในแต่ละเบราว์เซอร์และในระบบปฏิบัติการที่แตกต่างกัน ฟอนต์หลักในเว็บไซต์ของเราจะสามารถแสดง<br &sol;>&NewLine;ผลได้อย่างถูกต้องตามที่เราต้องการ โดยสรุปแล้วจะเขียนได้ประมาณนี้ครับ<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&commat;font-face &lbrace; &NewLine; font-family&colon; 'MyWebFont'&semi; &NewLine; src&colon; url&lpar;'webfont&period;eot'&rpar;&semi; &sol;&ast; IE9 Compat Modes &ast;&sol; &NewLine; src&colon; url&lpar;'webfont&period;eot&quest;&num;iefix'&rpar; format&lpar;'embedded-opentype'&rpar;&comma; &sol;&ast; IE6-IE8 &ast;&sol; &NewLine; url&lpar;'webfont&period;woff2'&rpar; format&lpar;'woff2'&rpar;&comma; &sol;&ast; Super Modern Browsers &ast;&sol; &NewLine; url&lpar;'webfont&period;woff'&rpar; format&lpar;'woff'&rpar;&comma; &sol;&ast; Pretty Modern Browsers &ast;&sol; &NewLine; url&lpar;'webfont&period;ttf'&rpar; format&lpar;'truetype'&rpar;&comma; &sol;&ast; Safari&comma; Android&comma; iOS &ast;&sol; &NewLine; url&lpar;'webfont&period;svg&num;svgFontName'&rpar; format&lpar;'svg'&rpar;&semi; &sol;&ast; Legacy iOS &ast;&sol; &NewLine;&rcub;<&sol;pre>&NewLine;<p>เราสามารถ generator ไฟล์ฟอนต์ต้นแบบให้ได้ไฟล์นามสกุลต่าง ๆ ครบตาม font-face ด้านบนโดยสามารถใช้<br &sol;>&NewLine;เครื่องมือ convert webfont แบบออนไลน์ได้ที่ <a href&equals;"https&colon;&sol;&sol;www&period;fontsquirrel&period;com&sol;tools&sol;webfont-generator" target&equals;"&lowbar;blank">https&colon;&sol;&sol;www&period;fontsquirrel&period;com&sol;tools&sol;webfont-generator<&sol;a><br &sol;>&NewLine;เลือกฟอนต์ที่เราต้องการแปลงให้ใช้งานบนเว็บไซต์ได้ &lpar; ไม่ไช่ทุกฟอนต์จะสามารถแปลงได้ &rpar; จากนั้นก็กด Convert<br &sol;>&NewLine;เสร็จจะมีปุ่มให้เราดาวน์โหลดไฟล์มาใช้งานซึ่งในนั้นจะมีฟอนต์มาให้เราทุกนามสกุลรวมไปถึงตัวอย่างการใช้งานด้วยครับ<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;