ข้อควรพิจารณาทางเทคนิค

เอกสารนี้ให้ข้อมูลทางเทคนิคเกี่ยวกับเบื้องหลังการทํางานเมื่อคุณขอแบบอักษรเว็บที่มี 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 ของข้อความที่ไม่ได้จัดรูปแบบ&quot

Apple Safari

Safari จะแสดงผลส่วนที่เหลือของหน้า แต่จนกว่าแบบอักษรจะโหลดเสร็จ จะแสดงพื้นที่ว่างแทนข้อความที่ใช้แบบอักษรนั้น

Microsoft Internet Explorer

Internet Explorer จะแสดงส่วนที่เหลือของหน้า แต่จนกว่าจะโหลดแบบอักษรเสร็จ บรรทัดนี้จะแสดงพื้นที่ว่างแทนข้อความที่ใช้แบบอักษรนั้น

โดยทั่วไปแล้ว ลักษณะการทํางานของ Internet Explorer&#39 อาจแตกต่างกันไปตามตําแหน่ง และการมีอยู่ขององค์ประกอบต่างๆ หากต้องการให้พฤติกรรมสอดคล้องกันในทุกเบราว์เซอร์ ให้ใช้ตัวโหลดแบบอักษรของเว็บ ตัวอย่างเช่น คุณอาจเลือกที่จะทําให้เบราว์เซอร์ทั้งหมดทํางานเหมือนกับ Firefox