Как загружать шрифты Google асинхронно с Font Face Observer

После того, как вы прочитали this article о лучших способах обслуживания веб-шрифтов, я хотел использовать последнюю библиотеку javascript Font Face Observer для асинхронного загрузки шрифтов Google на моем веб-сайте.Как загружать шрифты Google асинхронно с Font Face Observer

documentation гласит, что «шрифты могут быть предоставлены [...] службой шрифтов, например, Google Fonts», но в нем нет примеров того, как это реализовать. Я прочитал рекомендованные статьи о наблюдателе шрифтов, указанном на official website, но все они показали, как использовать его с самоорганизованными шрифтами.

Кто-нибудь использовал Font Face Observer для загрузки шрифтов Google? Или, не могли бы вы указать мне на какую-то документацию, которая показывает, как подойти к этому?

источник

2016-06-20 Willege

Я не понимаю, почему он называет себя * загрузчиком *. Браузер загружает шрифты. Насколько я вижу, все, что он делает, это сказать вам, когда они загружены. –

@ T.J.Crowder Он имеет метод '.load()'. Он также сообщает вам, когда шрифт загрузился и изменил классы на ваш основной текст, чтобы избежать FOIT. По вашему мнению, действительно ли загрузчик веб-шрифтов Google/Typekit остается лучшим асинхронным способом загрузки шрифтов? – Willege

Да, видел метод 'load', который они используют в примере на первой странице, но CSS на первой странице загрузит шрифт * в любом случае *, поэтому я понятия не имею, что означает' load'. Повторяю наилучшим образом: я не имею права давать такое мнение. Но ... шрифты загружаются асинхронно * по умолчанию *. Я еще не чувствовал необходимости контролировать этот процесс. Ясно, что люди, однако, должны быть случаи использования. –

Это довольно простой способ, которым я его использовал, хотя я не уверен, что это лучший способ. Причина, по которой такой подход может быть хорошим, заключается в том, что загрузка шрифта не блокирует рендеринг, так как у меня есть сценарий в моем JS-файле в конце. Поэтому в основном я начинаю загрузку шрифта, как только мой JS-файл начинает синтаксический анализ, и он получает визуализацию сразу после его загрузки.

import FontFaceObserver from 'fontfaceobserver' 
import loadCSS from './util/loadCSS' 

loadCSS('//fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700') 
const opensans = new FontFaceObserver('Open Sans') 
opensans.load().then(() => document.body.classList.add('fonts--loaded'))

источник

2016-09-27 05:39:56 thesublimeobject

Как загружать шрифты Google асинхронно с Font Face Observer

ответ

Смежные вопросы