Веб-шрифты или шрифты с локальной загрузкой?

98

С тех пор, как возникли проблемы, вызванные использованием Cufon, я рискнул отказаться от использования внешних ресурсов шрифтов, но в последнее время я искал альтернативные методы загрузки шрифтов, чтобы увидеть, есть ли лучший способ; у лучших методов есть способ просто появиться неожиданно.

Есть много новых методов и, кажется, вариации для каждого метода; Стоит ли мне использовать набор текста ? или веб-шрифты Google (с js или css)? следует ли мне продолжать использовать шрифты с локальной загрузкой (например, метод, созданный fontsquirrel.com)?

Я перечислю методы, которые кажутся наиболее хорошо принятыми ниже, с некоторыми тестами, но действительно ли стоит переходить на веб-шрифт? Кажется, что он будет нести более высокую нагрузку на ресурсы (HTTP-запросы) и будет иметь меньше типов форматов файлов (меньшая совместимость) и т. Д. Но похоже, что файлы загружаются асинхронно и эффективно в большинстве случаев.

  1. Это просто вопрос ситуации и необходимости? Если так, то кто они?
  2. Есть ли кардинальные различия между этими методами?
  3. Есть ли лучший метод, которого я не перечислил?
  4. Какие плюсы и минусы производительности? Смотреть? зависимости? совместимость?

Я действительно ищу здесь передовой опыт, производительность - это важная вещь, но также важны масштабируемость и простота использования. Не говоря уже о внешнем виде.

Google CSS

  • использует только внешнюю таблицу стилей
  • использует только наименьший совместимый тип файла
  • может использовать @importили <link>или взять содержимое styleshee ( @font-face) и поместить его прямо в вашу собственную таблицу стилей.

результаты теста

  78ms load of html
  36ms load of css

введите описание изображения здесь

Метод Google JS

  • использует webfont.jsдля загрузки stylehet
  • использует только наименьший совместимый тип файла
  • добавляет :rootэлемент с классом
  • добавляет сценарий в голову.

результаты теста

    171ms load of html
    176ms load of js
    32ms load of css

введите описание изображения здесь

Typekit метод

  • добавляет :rootэлемент с классом.
  • может использовать *.jsсниппет или загружаемый извне файловый *.jsфайл
  • использует data:font/opentypeвместо файла шрифта.
  • добавляет сценарий в голову
  • добавляет встроенный CSS в заголовок

  • добавляет внешнюю таблицу стилей в заголовок

    вы можете легко добавлять / удалять / настраивать шрифты и целевые селекторы с typekit.com

результаты теста

  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

введите описание изображения здесь

… И метод Font Squirrel

@font-face{
    font-weight:400;
    font-style:normal;
    font-family:open_sanslight;
    src:url(../font/opensans-light-webfont.eot);
    src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
        url(../font/opensans-light-webfont.woff) format(woff),
        url(../font/opensans-light-webfont.ttf) format(truetype),
        url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}

… Или с данными: метод шрифта…

@font-face {
    font-family: 'open_sanslight';
    src: url('opensans-light-webfont-f.eot');
}

@font-face {
    font-family: 'open_sanslight';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
         url('opensans-light-webfont-f.ttf') format('truetype'),
         url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}
javascript css fonts webfonts Дарчер
источник
4
Это хороший вопрос.
dachi
1
Не уверен, что это лучший метод, но я всегда использую Google CSS вот так<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'>
lefoy 01
Я разработал такой веб-сайт, как font-squirrel, только для локальных Georgianвеб-шрифтов. Я использую метод font-squirrel, и мне тоже хотелось бы получить отличный ответ на этот вопрос.
dachi
1
Это очень хорошая статья о том, как объявлять пуленепробиваемые @font-faceобъявления, возможно, вы найдете полезную информацию. paulirish.com/2009/bulletproof-font-face-implementation-syntax
lefoy 01
Я могу начать вознаграждение, когда оно будет доступно для получения лучших / улучшенных ответов, если вы не примете его до тех пор, пока.
Davit

Ответы:

34

Во-первых, я кое-что проясню по поводу предложения Google. Он фактически загрузит наименьший формат, который может обработать ваш браузер. WOFF предлагает файлы небольших размеров, и ваш браузер поддерживает это, поэтому вы видите именно их. WOFF также довольно широко поддерживается. Однако, например, в Opera вы, вероятно, получите версию шрифта TrueType.

Я считаю, что логика размера файла также объясняет, почему Font Squirrel пробует их именно в таком порядке. Но это в основном предположения с моей стороны.

Если вы работаете в среде, где учитываются все запросы и байты, вам придется провести профилирование, чтобы выяснить, что лучше всего подходит для вашего варианта использования. Будут ли люди просматривать только одну страницу и больше не заходить? В таком случае правила кеширования не имеют большого значения. Если они просматривают или возвращаются, у Google могут быть лучшие правила кеширования, чем на вашем сервере. Большая проблема - задержка или пропускная способность? В случае задержки стремитесь к меньшему количеству запросов, поэтому разместите его локально и объедините файлы как можно больше. Если есть пропускная способность, выберите тот вариант, который дает наименьший код и наименьший формат шрифта.

Теперь перейдем к рассмотрению CSS и JS. Давайте посмотрим на следующий фрагмент HTML:

<head>
    <script type="text/javascript" src="script1.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <style type="text/css">
        @import url(style2.css);
    </style>
    <script type="text/javascript">
        (function() {
            var wf = document.createElement('script');
            wf.src = 'script2.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>

Во многих случаях script1, style1и style2будет блокирование. Это означает, что браузер не может продолжать отображение документа, пока этот ресурс не загрузится (хотя современные браузеры немного ошибаются). Что на самом деле может быть хорошо, особенно с таблицами стилей. Это предотвращает появление нестилизованного контента, а также предотвращает гигантский сдвиг, который может произойти при применении стилей (а смещение контента действительно раздражает пользователя).

С другой стороны, script2не было бы блокировки. Его можно загрузить позже, и браузер может перейти к синтаксическому анализу и отображению остальной части документа. Так что это тоже может быть полезно.

Говоря конкретно о шрифтах (и даже более конкретно о предложениях Google), я бы, вероятно, придерживался метода CSS (мне нравится, @importпотому что он сохраняет стили с таблицей стилей, но это мог быть только я). Файл JS, загруженный сценарием ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ), больше, чем @font-faceдекларация, и просто выглядит как намного больше работы. И я не верю, что загрузка самого шрифта (WOFF или TTF) блокирует, так что это не должно сильно задерживать. Я лично не большой поклонник CDN, но факт в том, что они ДЕЙСТВИТЕЛЬНО быстрые. Серверы Google опередят большинство планов виртуального хостинга, а поскольку их шрифты настолько популярны, люди могут даже уже кэшировать их.

И это все, что у меня есть.

У меня нет опыта работы с Typekit, поэтому я исключил его из теоретических соображений. Если есть какие-либо неточности, не считая обобщений между браузерами ради аргументов, укажите на них.

ZachRabbit
источник
Я полагал, что по большей части это будет ситуативным, но вы также должны обратить внимание на блокировку и проблемы с FOUT. Я прочитал об этом здесь: paulirish.com/2009/fighting-the-font-face-fout & stevesouders.com/blog/2009/10/13/font-face-and-performance . Сегодня я проведу несколько тестов и опубликую информацию о различиях в производительности. Спасибо за отличное понимание.
Дарчер 01
11

Я думаю, что вы очень хорошо ответили на время загрузки в своем вопросе. С моей точки зрения, есть несколько источников, которые следует добавить в список, и еще несколько соображений, которые следует изучить, чтобы получить полное представление о вариантах.

Некоторые другие авторитетные источники шрифтов

cloud.typography

http://www.typography.com/cloud/

Насколько я могу судить, шрифты встраиваются как данные в файл CSS:

@font-face{ 
    font-family: "Font Name"; 
    src: url(data:application/x-font-woff;base64,d09GRk9UVE8AACSCAA0AAAAARKwAAQAAAAAiVAAAAi4AAAadAAAAAAAAAABDRkYgAAAIyAAAFCgAABmIK5m+CkdERUYAABzwAAAAHQAAACAAXQAER1BPUwAAHRAAAAQlAAAYAq+OkMNHU1VC ... ); 
    font-weight:400; font-style:normal; 
}

Вот мои характеристики:

94ms load of css from their server
37ms load of css from our server (will vary based on your configuration)
195ms load of data:fonts from our server (will vary based on your configuration)

Вот их высокоуровневое описание их развертывания .

Fonts.com

Я не пользовался этой услугой, но они являются хорошо известными поставщиками шрифтов, и информация, которую они разместили на своем сайте, впечатляет. У меня нет спецификаций их точных методов, но вот что я знаю точно:

  • Доступны одни из самых известных шрифтов в мире
  • Действительно большая библиотека шрифтов (более 20000)
  • Загрузка шрифтов для рабочего стола для создания макетов
  • Пользовательский инструмент для тестирования веб-шрифтов в браузере
  • Прекрасные элементы управления типографикой и подмножества
  • Варианты самостоятельного хостинга

FontSpring

Аффилирован с FontSquirrel. Шрифты можно приобрести здесь по фиксированной цене. Поставляются файлы шрифтов и сопутствующий CSS для развертывания на вашем собственном сервере, как и FontSquirrel.

Расширенные характеристики

Что касается общих плюсов и минусов каждой службы шрифтов, вот несколько сравнений:

Размер библиотеки шрифтов

  • Fonts.com : 20 000+
  • FontSpring : 1000+
  • FontSquirrel : 300+
  • Google : 600+
  • Типовой набор : 900+
  • Typography.com (cloud.typography.com): около 300+ (35 семей)

Ценообразование

  • Fonts.com : 20 долларов в месяц за 500 000 просмотров страниц.
  • FontSpring : от шрифта (единовременная покупка шрифтов)
  • FontSquirrel : Бесплатно
  • Google : бесплатно
  • Typekit : 4 доллара в месяц за 500 000 просмотров страниц.
  • Typography.com : 12,50 долларов в месяц за 1 000 000 просмотров страниц.

Качество шрифта

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

  • Fonts.com : высокий
  • FontSpring : от смешанного до высокого
  • FontSquirrel : смешанный
  • Google : смешанный
  • Typekit : высокий
  • Typography.com : очень высокий (я даю этому обозначение «очень высокий», потому что Fonts.com, FontSpring и Typekit поддерживают несколько шрифтов, где это только шрифты от H&FJ, которые являются одними из лучших в мире)

Качество шрифта II: Типографика

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

  • Fonts.com : кернинг, расстояние между буквами, лигатуры, альтернативные символы, дроби и т. Д.
  • FontSpring : Нет
  • FontSquirrel : Нет
  • Google : нет
  • Типовой набор : Нет
  • Typography.com : заглавные буквы, лигатуры, альтернативные символы, альтернативные стили чисел, дроби и т. Д.

Поддержка браузера

В основном это сводится к форматам шрифтов, которые поддерживаются каждой службой. Основные из них:

  • EOT: для Internet Explorer (IE 4+)
  • TrueType и OpenType: традиционные форматы (Safari 3.1+, FF 3.5+, Opera 10+)
  • WOFF: новый стандарт для веб-шрифтов (FF 3.6+, Chrome 5+)
  • SVG: IOS <4.2

Дополнительная информация в Правиле @ Font-Face и полезных трюках с веб-шрифтами

Все эти службы поддерживают основные форматы шрифтов. С собственными шрифтами, если вы используете правильный синтаксис, вы должны быть защищены. Вот обновление пуленепробиваемого синтаксиса от FontSpring 2011 года :

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

Производительность I: Загрузки

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

Платные сервисы, такие как Fonts.com, Typekit или Typography.com, используют методы для определения правильного формата, а затем предоставляют правильный формат шрифта, часто как данные base64 в файле CSS.

Насколько я могу судить, различия в методах, которые вы перечислили выше, довольно незначительны для пользователей высокоскоростного Интернета (похоже, разница <200 мс), но их стоит рассмотреть для устройств в более медленных сетях, особенно для некэшированных обращений к страницам.

Перформанс II: Подмножество

Если вы знаете, что вы хотите использовать только определенные символы, вы можете создать свой шрифт с подмножеством символов и, таким образом, уменьшить размер загрузки.

  • Fonts.com : Очень подробный контроль
  • FontSpring : можно перекомпилировать как подмножество с помощью генератора веб-шрифтов FontSquirrel
  • FontSquirrel : можно перекомпилировать как подмножество через генератор веб-шрифтов
  • Google : очень подробный контроль
  • Typekit : ограниченные варианты «все символы» или «по умолчанию»
  • Typography.com : очень подробный контроль

Производительность III: Доставка

  • Fonts.com : глобальный CDN или ваш собственный сервер
  • FontSpring : на основе вашего сервера
  • FontSquirrel : на основе вашего сервера
  • Google : глобальная супер-CDN
  • Typekit : глобальный CDN
  • Typography.com : глобальный CDN (125 000 серверов)

Языковая поддержка

  • Fonts.com : 40 языков, включая азиатские и ближневосточные
  • FontSpring : Western, в зависимости от шрифта
  • FontSquirrel : западный, в зависимости от шрифта
  • Google : Western, в зависимости от шрифта
  • Typekit : Western, в зависимости от шрифта
  • Typography.com : западный, в зависимости от шрифта

Тестирование и внедрение

  • Fonts.com : очень просто, с обширными настраиваемыми инструментами
  • FontSpring : Технический (сделай сам)
  • FontSquirrel : Технический (сделай сам)
  • Google : просто
  • Typekit : легкий
  • Typography.com : Простое тестирование, потребуется немного больше изменений после развертывания
Nwalton
источник
Это не отвечает на вопрос OP. Он просто сравнивает несколько веб-шрифтов.
stackErr 06
Это самая информативная информация по каждому продавцу, спасибо за всю эту информацию!
Дарчер 07
10

Ну как ты после

... если здесь есть лучшие практики, производительность имеет большое значение, но также важны масштабируемость и простота использования. Не говоря уже о внешнем виде.

ответ (как всегда в веб-дизайне): это зависит от обстоятельств!

Одно можно сказать наверняка: я бы не рекомендовал использовать подход JS (показанный во втором примере).

Лично мне не нравится делать презентационные вещи и стили CSS в зависимости от Javascript, хотя у подавляющего большинства пользователей он включен. Это вопрос не путать.

И, как вы можете видеть в данном примере, есть своего рода FOUC (флэты нестилизованного содержимого), потому что страница уже отображается браузером до того, как шрифт станет доступным. Как только это произойдет, страница будет перерисована. И чем больше размер сайта, тем больше влияние (производительность)!

Поэтому я бы никогда не стал использовать какое-либо JS-решение для встраивания шрифтов.

Теперь давайте посмотрим на чистые методы CSS.
С давних пор здесь обсуждается "vs. @import". Лично я предпочитаю избегать использования @import и всегда использовать <link>только. Но это в основном вопрос личных предпочтений. Единственное, чего никогда не следует делать, - это смешивать их обоих!

Локальный или CDN
Когда вы решаете, размещать ли ваши файлы шрифтов локально или использовать CDN, имхо это в основном зависит от количества различных шрифтов и соответствующих шрифтов, которые вы хотите встроить.

Почему это важно или играет роль?
С точки зрения производительности я бы рекомендовал включить шрифт Base64, закодированный в вашу (одну) таблицу стилей. Но только формат .woff, так как он используется почти всеми современными браузерами, то есть для большинства ваших посетителей. Для всех остальных пользователей действует дополнительный запрос.

Но из-за «накладных расходов», вызванных кодировкой Base64 и размером файла шрифта (даже в формате .woff), этот метод следует использовать только в том случае, если у вас не более 3 или 4 различных шрифтов. И всегда убедитесь, что ваш сервер доставляет файлы (CSS) в сжатом виде.

Большим преимуществом этого является то, что у вас нет дополнительного запроса на файл шрифта. И после загрузки первой страницы (независимо от того, какая страница вашего сайта) файл CSS кешируется. Это также является преимуществом, если вы используете кеш приложения HTML5 (что вы, безусловно, будете делать).

Помимо того факта, что автор не должен использовать на своем сайте более 3 или 4 различных шрифтов, давайте посмотрим на метод использования CDN Google.

Прежде всего имейте в виду, что вы можете (и всегда должны) включать все желаемые шрифты в один <link>, например:

<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|PT+Sans:400,700,400italic,700italic|Montez' rel='stylesheet' type='text/css'>

Это приведет к следующему ответу:

@font-face {
  font-family: 'Montez';
  font-style: normal;
  font-weight: 400;
  src: local('Montez'), local('Montez-Regular'), url(http://themes.googleusercontent.com/static/fonts/montez/v4/Zfcl-OLECD6-4EcdWMp-Tw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/QABk9IxT-LFTJ_dQzv7xpIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/03aPdn7fFF3H6ngCgAlQzBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/Foydq9xJp--nfYIx2TBz9QFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}

Как видите, существует 9 различных файлов шрифтов, что означает всего 10 запросов (включая один из элементов ссылки), если у пользователя нет одного или нескольких запрошенных шрифтов, установленных локально. И эти запросы повторяются при каждом запросе новой страницы на ваш сайт (хотя данные больше не передаются)! Также ответ на запрос <link>никогда не кэшируется.

Рекомендация: В
конце концов, я бы очень рекомендовал включить ваши файлы шрифтов в формате .woff в кодировке Base64 в вашу таблицу стилей!

См. Эту прекрасную статью для примера и описания того, как это сделать!

Нетсёрфер
источник
Большое спасибо, искал это решение!
Кен
3

Я использую встроенный метод css, потому что накладные расходы на дополнительный запрос больше, чем увеличение размера при кодировании bease64. Это также компенсируется сжатием файлов css сервером gizip.

Другой вариант - использовать асинхронную загрузку шрифтов, но чаще всего пользователи видят, как шрифты появляются после загрузки.

Независимо от метода, вы можете уменьшить размер файла шрифта, включив только те наборы символов, которые вы будете использовать.

Крис Гунавардена
источник
При использовании HTTP2 нет упомянутых выше дополнительных накладных расходов.
Крис Гунавардена
1

Лично я использую Google Fonts. У них есть хороший выбор, и они недавно улучшили сжатие шрифтов, перейдя также на сжатие Zopfli . Google стремится сделать Интернет быстрее, поэтому я предполагаю, что и в этой части они принесут больше оптимизации.

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

Я не знаю о Typekit и других, но с помощью Google Fonts вы можете выбрать для обслуживания определенные подмножества и диапазон символов, чтобы еще больше ускорить доставку.

Выбор подмножества:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet">

Выбор круга персонажей:

<!-- Only serve H,W,e,l,o,r and d -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=HelloWorld" rel="stylesheet">

Вы можете использовать dns-prefetch, чтобы еще больше повысить скорость с доставкой шрифтов.

Я действительно думаю и надеюсь, что Google сделает все возможное, чтобы максимально ускорить доставку шрифтов. Миллисекунды, необходимые для их загрузки, не повредят моему сайту, поэтому я с удовольствием их использую.

Короче говоря:

Если доставка шрифтов в миллисекундах вредит вашему сайту, например, из-за того, что он загружается дольше рекомендованной 1 секунды, я думаю, вам следует разместить их самостоятельно.

Джереми Карлссон
источник
1
Хороший момент в том, что <link rel=dns-prefetch href='//fonts.googleapis.com'>я использую его для аналитики, тепловых карт и поддоменов, по какой-то причине он не зарегистрировался для запуска для внешних веб-шрифтов. И время загрузки сильно отличается от шрифта к шрифту, я полагаю, если вы используете довольно популярный шрифт (может быть кеширован) или только несколько выбранных шрифтов, использование веб-шрифтов - отличный довольно быстрый источник шрифтов. Скоро выложу здесь тесты скорости.
Дарчер 01
1

Лучше всего импортировать шрифты с помощью ajax, вот так:

<script>
    (function() {
        var font = document.createElement('link'); 
        font.type = 'text/css'; 
        font.rel = 'stylesheet';
        font.href = '/url/to/font.css';
        var s = document.getElementsByTagName('link')[0]; 
        s.parentNode.insertBefore(font, s);
      })();
</script>

Я делаю это на своей веб-странице и получаю 9 баллов в тесте Google Insights.

Phok7
источник
Интересный. Я должен изучить PageSpeeds с помощью этого метода.
darcher
2
А как насчет asyncатрибута? То же самое.
Tymek