มีลิงค์หรือนำเข้า Google Web Fonts หรือไม่

190

วิธีที่ต้องการรวมถึง Google Web Fonts ในหน้าคืออะไร?

ผ่านแท็กลิงก์หรือไม่

<link href = 'http: //fonts.googleapis.com/css? family = Judson: 400,400italic, 700' rel = 'stylesheet' type = 'text / css'>

ผ่านการนำเข้าในสไตล์ชีทหรือไม่
```
@import url (http://fonts.googleapis.com/css?family=Kameron:400,700);
```
หรือใช้เว็บโหลดฟอนต์

https://developers.google.com/webfonts/docs/webfont_loader

fonts webfonts google-webfonts

— Kajo
แหล่งที่มา

คุณอาจต้องการอ่านคำถามนี้ก่อนใช้ฟอนต์ google เลย ขึ้นอยู่กับโครงการเฉพาะ - มันอาจไม่ใช่ตัวเลือกที่ฉลาด

— Obmerk Kronen

คำตอบ:

285

สำหรับ 90% + ของกรณีที่คุณต้องการ<link>แท็ก เป็นกฎง่ายๆคุณต้องการหลีกเลี่ยง@importกฎเพราะพวกเขาเลื่อนการโหลดของทรัพยากรรวมจนกว่าไฟล์จะถูกดึง .. และถ้าคุณมีกระบวนการสร้างที่ "แบน" @ การนำเข้าของจากนั้นคุณสร้างปัญหาอื่นกับเว็บแบบอักษร : ผู้ให้บริการแบบไดนามิกเช่น Google WebFonts ให้บริการแบบอักษรเฉพาะแพล็ตฟอร์มดังนั้นถ้าคุณเพียงแค่แทรกเนื้อหาคุณก็จะพบกับฟอนต์ที่แตกหักในบางแพลตฟอร์ม

ทีนี้ทำไมคุณถึงต้องใช้เว็บฟอนต์โหลดเดอร์? หากคุณต้องการความสมบูรณ์วิธีการควบคุมแบบอักษรที่มีการโหลด เบราว์เซอร์ส่วนใหญ่จะเลื่อนการวาดเนื้อหาไปที่หน้าจอจนกว่าจะดาวน์โหลดและใช้ CSS ทั้งหมดซึ่งจะเป็นการหลีกเลี่ยงปัญหา "แฟลชของเนื้อหาที่ไม่มีการจัดรูปแบบ" ข้อเสียคือ .. คุณอาจมีการหยุดชั่วคราวและล่าช้าเป็นพิเศษจนกว่าเนื้อหาจะปรากฏ ด้วย JS loader คุณสามารถกำหนดวิธีการและแบบอักษรที่มองเห็นได้ .. ตัวอย่างเช่นคุณสามารถจางหายไปหลังจากที่เนื้อหาต้นฉบับถูกวาดบนหน้าจอ

อีกครั้งกรณี 90% เป็น<link>แท็ก: ใช้ CDN ที่ดีและแบบอักษรจะลดลงอย่างรวดเร็วและมีโอกาสมากขึ้นที่จะแสดงผลออกมาจากแคช

สำหรับข้อมูลเพิ่มเติมและการดู Google Web Fonts เชิงลึกโปรดดูวิดีโอ GDLนี้

— igrigorik
แหล่งที่มา

"เพราะพวกเขาเลื่อนการโหลดของทรัพยากรที่รวมไว้จนกว่าไฟล์จะถูกดึง" - นั่นเป็นเหตุผลที่ดีที่จะใช้ @import ใช่ไหม เพราะปกติคุณไม่ต้องการที่จะเห็นเนื้อหาจนกว่าตัวอักษรที่มีการโหลด (เพื่อหลีกเลี่ยงการสั่นไหวที่ตัวอักษร)

— อเล็กซ์

Web Fonts API มีประโยชน์มากเมื่อทำงานกับ HTML5 Canvas คุณไม่สามารถใช้แบบอักษรที่ยังไม่เสร็จสิ้นก่อนที่จะวาดข้อความด้วยและแน่นอนเมื่อตัวอักษรถูกโหลดมันจะไม่ได้รับการปรับปรุงโดยอัตโนมัติ จำเป็นต้องใช้ API สำหรับการติดตามความคืบหน้าของการโหลดเนื้อหาเช่นในเกม

— rvighne

ข้อมูลนี้ควรอยู่ในหน้าเว็บแบบอักษรของ Google มันนำเสนอสามตัวเลือกให้กับคุณ - และไม่ได้ให้คำแนะนำที่เป็นประโยชน์เกี่ยวกับวิธีการใช้และเวลา

— Gal

บทแนะนำ ' เริ่มต้นใช้งาน ' ของ Google ใช้เฉพาะ<link>วิธีการเท่านั้นดังนั้นฉันคิดว่านี่เป็นวิธีที่พวกเขาแนะนำในแบบที่ไม่ได้พูด

— James Cushing

คุณอาจต้องการที่จะเพิ่มrel="preload"ไปที่<link>แท็กเกินไปแล้วเพราะตัวอักษรจะถูกโหลดก่อนที่จะปรากฏข้อความ ดู3perf.com/blog/link-rels

— Elijah Mock

ใช้<link>Google ที่จัดทำขึ้นเนื่องจากมีการกำหนดเวอร์ชันของแบบอักษร แต่ด้านบนใช้คุณลักษณะการเชื่อมต่อล่วงหน้าของ HTML5 เพื่อขอให้เบราว์เซอร์เปิดการเชื่อมต่อ TCP และเจรจา SSL ล่วงหน้าด้วย fonts.gstatic.com นี่คือตัวอย่างซึ่งจำเป็นต้องอยู่ใน<head></head>แท็กของคุณอย่างชัดเจน:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

— มาร์ค Cilia Vincenti
แหล่งที่มา

มันถูกต้องหรือไม่ที่การเชื่อมต่อล่วงหน้านั้นเป็นโดเมนที่แตกต่างจากลิงค์สไตล์ชีทในตัวอย่างของคุณ? fonts.gstatic.comกับfonts.googleapis.com

— BadHorsie

@ BadHorsie มันเป็นจุดรวมของมัน สไตล์ชีทบน fonts.googleapis.com มีลิงค์ไปยังแหล่งข้อมูลบน fonts.gstatic.com คุณกำลังบอกให้เบราว์เซอร์เริ่มต้นการเชื่อมต่อกับโฮสต์หลังเพื่อที่จะได้เชื่อมต่อหรือเริ่มการเชื่อมต่อตามเวลาที่พบลิงค์ในสไตล์ชีท

— มาร์ค Cilia Vincenti

หากคุณกังวลเกี่ยวกับ SEO (Search Engine Optimization) และประสิทธิภาพคุณควรใช้<link>แท็กเพราะสามารถโหลดแบบอักษรล่วงหน้าได้

ตัวอย่าง:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

สำหรับข้อมูลเพิ่มเติมอ่านได้ที่: https://ashton.codes/preload-google-fonts-using-resource-hints/

— ลอบสเตอร์
แหล่งที่มา