Google Web Yazı Tipleri bağlantısı dahil edilsin mi, içe aktarılsın mı?

190

Google Web Yazı Tiplerini bir sayfaya eklemenin tercih edilen yolu nedir?

bağlantı etiketi üzerinden?

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

stil sayfasına aktarma yoluyla mı?

@import url (http://fonts.googleapis.com/css?family=Kameron:400,700);

veya web yazı tipi yükleyicisini kullanın

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

fonts webfonts google-webfonts

— Kajo
kaynak

Google yazı tiplerini kullanmadan önce bu soruyu da okumak isteyebilirsiniz . Belirli bir projeye bağlı olarak - her zaman akıllı seçim olmayabilir.

— Obmerk Kronen

Yanıtlar:

285

Vakaların% 90'ı + için <link>etiketi muhtemelen istersiniz . Genel bir kural olarak @import, dosya alınana kadar dahil edilen kaynağın yüklenmesini ertelediğinden kurallardan kaçınmak istersiniz. : Google WebFonts gibi dinamik sağlayıcılar, fontların platforma özgü sürümlerini sunar, bu nedenle içeriği yalnızca satır içi yaparsanız, bazı platformlarda kırık fontlarla karşılaşırsınız.

Şimdi neden web yazı tipi yükleyicisini kullanasınız? Yazı tiplerinin nasıl yükleneceği üzerinde tam kontrole ihtiyacınız varsa . Çoğu tarayıcı, tüm CSS indirilinceye ve uygulanana kadar içeriği ekrana boyamayı erteler - bu, "biçimlendirilmemiş içeriğin yanıp sönmesi" sorununu önler. Dezavantajı .. içerik görünür hale gelene kadar fazladan bir duraklama ve gecikme olabilir. JS yükleyici ile, yazı tiplerinin nasıl ve ne zaman görüneceğini tanımlayabilirsiniz .. örneğin, orijinal içerik ekranda boyandıktan sonra bunları soluklaştırabilirsiniz.

Bir kez daha,% 90 vaka <link>etiketi: iyi bir CDN kullanın ve yazı tipleri hızlı ve daha da büyük olasılıkla önbellekten sunulacak.

Daha fazla bilgi ve Google Web Yazı Tiplerine ayrıntılı bir bakış için bu GDL videosuna göz atın

— igrigorik
kaynak

"dosya alınana kadar dahil edilen kaynağın yüklenmesini ertelediğinden" - @import kullanmak için iyi bir neden değil mi? Çünkü normalde yazı tipi yüklenene kadar içeriği görmek istemezsiniz (bu yazı tipi titremesini önlemek için)

— Alex

Web Yazı Tipleri API'sı HTML5 Canvas ile çalışırken çok kullanışlıdır. Metin çizmeden önce yüklemeyi bitirmemiş bir yazı tipini kullanamazsınız ve elbette yazı tipi yüklendikten sonra otomatik olarak güncellenmez. İlgili olarak, örneğin bir oyunda varlıkların yüklenmesinin ilerlemesini izlemek için API gereklidir.

— rvighne

Bu bilgiler Google Web Yazı Tipleri sayfasında olmalıdır. Sadece size üç seçeneği sunar ve hangisinin ne zaman kullanılacağına dair yararlı ipuçları vermez.

— Gal

Google'ın kendi ' Başlarken ' öğreticisi yalnızca <link>yöntemi kullanıyor , bu yüzden sanırım söylenmeyen bir şekilde önerdikleri

— James Cushing

Sen eklemek isteyebilirsiniz rel="preload"için <link>sonra yazı tipi metin görünmeden önce yüklenir çünkü da etiketi. Bkz 3perf.com/blog/link-rels

— Elijah Mock

<link>Yazı tipinde sürüm olduğu için Google tarafından sağlananları kullanın , ancak hemen üstünde tarayıcılardan bir TCP bağlantısı açmasını ve fonts.gstatic.com ile önceden SSL görüşmesini istemek için HTML5'in ön bağlantı özelliğini kullanın. <head></head>Etiketinizde bulunması gereken bir örnek :

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

— Mark Cilia Vincenti
kaynak

Ön bağlantının, örneğinizdeki stil sayfası bağlantısından tamamen farklı bir alan adı olması doğru mu? fonts.gstatic.comversusfonts.googleapis.com

— BadHorsie

@BadHorsie tüm mesele bu. Fonts.googleapis.com adresindeki stil sayfasının fonts.gstatic.com adresindeki bir kaynağa bağlantısı vardır. Tarayıcıya, son ana bilgisayara bir bağlantı başlatmasını söylüyorsunuz, böylece stil sayfasında bağlantıyı bulduğunda bağlanmaya veya bağlanmaya başlayacaktır.

— Mark Cilia Vincenti

SEO (Arama Motoru Optimizasyonu) ve performans konusunda endişeleriniz varsa <link>, yazı tipini önceden yükleyebileceği için etiketi kullanmak iyidir .

Misal:

<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>

Daha fazla bilgi için bunu okuyun: https://ashton.codes/preload-google-fonts-using-resource-hints/

— Istakoz
kaynak