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

เอกสารนี้ให้ข้อมูลทางเทคนิคเกี่ยวกับสิ่งที่เกิดขึ้น ฉากต่างๆ เมื่อคุณขอแบบอักษรเว็บด้วย 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 จะแสดงข้อความในแบบอักษรเริ่มต้นก่อน จากนั้นแสดงผลข้อความในแบบอักษรอีกครั้ง เมื่อโหลดแบบอักษรแล้ว พฤติกรรมนี้เรียกว่า "แฟลชของแบบไม่จัดรูปแบบ" ข้อความ"

Apple Safari

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

Microsoft Internet Explorer

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

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