เอกสารนี้ให้ข้อมูลทางเทคนิคเกี่ยวกับเบื้องหลังการทํางานเมื่อคุณขอแบบอักษรเว็บที่มี Google Fonts API
เอกสารนี้ยังให้ข้อมูลเกี่ยวกับลักษณะการทํางานเฉพาะเบราว์เซอร์ด้วย
หากเพียงต้องการใช้ Fonts API คุณก็ไม่จําเป็นต้องอ่านหน้านี้ อย่างไรก็ตาม การอ่านหน้านี้อาจช่วยปรับปรุงประสิทธิภาพการโหลดหน้าเว็บ
Google Fonts API คืออะไร
เมื่อเบราว์เซอร์ส่งคําขอสไตล์ชีต Fonts API (ตามที่ระบุไว้ในแท็ก <link>
ในหน้าเว็บ) Fonts API จะแสดงสไตล์ชีตที่สร้างขึ้นสําหรับ User Agent ที่เจาะจงที่ส่งคําขอ
ตัวอย่างเช่น คําขอสําหรับ Inconsolata จาก Firefox จะแสดงผล CSS ต่อไปนี้
@font-face { font-family: 'Inconsolata'; src: local('Inconsolata'), url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype'); }
ในทางกลับกัน คําขอจาก Internet Explorer จะส่งคืนข้อความต่อไปนี้
@font-face { font-family: 'Inconsolata'; src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw'); }
เมื่อดาวน์โหลด CSS แล้ว เบราว์เซอร์จะดาวน์โหลดแบบอักษรในรูปแบบที่เหมาะสมสําหรับเบราว์เซอร์
ลักษณะการทํางานเฉพาะเบราว์เซอร์
ส่วนนี้จะอธิบายลักษณะการทํางานเริ่มต้นของแบบอักษรแต่ละรายการด้วยแบบอักษรเว็บ โปรดทราบว่าคุณควบคุมลักษณะการทํางานเหล่านี้ได้โดยใช้ตัวโหลดแบบอักษรของเว็บ
ดูรายการเบราว์เซอร์ที่รองรับได้ในคําถามที่พบบ่อย
Google Chrome
Chrome จะแสดงผลส่วนที่เหลือของหน้า แต่จนกว่าแบบอักษรจะโหลดเสร็จ จะแสดงพื้นที่ว่างแทนข้อความที่ใช้แบบอักษรนั้น
Mozilla Firefox
Firefox จะแสดงข้อความในแบบอักษรเริ่มต้นก่อน แล้วจึงแสดงผลข้อความเป็นแบบอักษรอีกครั้งเมื่อโหลดเสร็จ ลักษณะการทํางานนี้เรียกว่า ""Flash ของข้อความที่ไม่ได้จัดรูปแบบ"
Apple Safari
Safari จะแสดงผลส่วนที่เหลือของหน้า แต่จนกว่าแบบอักษรจะโหลดเสร็จ จะแสดงพื้นที่ว่างแทนข้อความที่ใช้แบบอักษรนั้น
Microsoft Internet Explorer
Internet Explorer จะแสดงส่วนที่เหลือของหน้า แต่จนกว่าจะโหลดแบบอักษรเสร็จ บรรทัดนี้จะแสดงพื้นที่ว่างแทนข้อความที่ใช้แบบอักษรนั้น
โดยทั่วไปแล้ว ลักษณะการทํางานของ Internet Explorer' อาจแตกต่างกันไปตามตําแหน่ง และการมีอยู่ขององค์ประกอบต่างๆ หากต้องการให้พฤติกรรมสอดคล้องกันในทุกเบราว์เซอร์ ให้ใช้ตัวโหลดแบบอักษรของเว็บ ตัวอย่างเช่น คุณอาจเลือกที่จะทําให้เบราว์เซอร์ทั้งหมดทํางานเหมือนกับ Firefox