Подтвердить что ты не робот

Если несколько источников указаны на @font-face, все они загружены на стороне клиента?

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

@font-face {
    font-family: 'Proxima Nova';
    src: url('proximanova-regitalic-webfont.eot');
    src: url('proximanova-regitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('proximanova-regitalic-webfont.woff') format('woff'),
         url('proximanova-regitalic-webfont.ttf') format('truetype'),
         url('proximanova-regitalic-webfont.svg#proxima_nova_rgitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

Кроме того, это самый оптимальный способ делать @font-face? Существуют ли другие стратегии сокращения времени загрузки для пользователей?

Ответ 1

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

Это похоже на то, как браузер использует стек шрифтов в свойстве font-family.

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

CSS уже разработан, чтобы минимизировать время загрузки и количество запросов через этот последовательный подход. Если ваши шрифты слишком долго поступают с вашего собственного сервера, подумайте об использовании быстрого CDN вместо Google Web Fonts, Typekit или Adobe Edge.

Ответ 2

Чтобы ответить на этот вопрос, я привел соответствующие отрывки из следующего документа W3C:

Модуль шрифтов CSS 3 уровня
Рекомендация кандидата W3C 3 октября 2013 г.

(В цитированном материале обратите внимание, что я подчеркнул те предложения, которые наиболее уместны для вопроса.)

4.1 Правило @font-face

Правило @font-face позволяет привязываться к шрифтам, которые автоматически извлекаются и активируются при необходимости. позволяет авторам для выбора шрифта, который точно соответствует целям дизайна для данного страницы, а не ограничивать выбор шрифта набором доступных шрифтов на данной платформе. Набор описателей шрифтов определяет местоположение ресурс шрифта, локально или внешне, наряду со стилем характеристики индивидуального лица. Несколько @font-faceправила могут быть использованы для построения семейств шрифтов с различными гранями. Используя правила сопоставления шрифтов CSS, пользовательский агент может выборочно загружать только те грани, которые необходимы для данного фрагмента текста.

4.3 Ссылка на шрифт: дескриптор src

Этот дескриптор указывает ресурс, содержащий данные шрифта. это требуется для правила @font-face. Его значение приоритет, список внешних ссылок или разделенных запятыми локально установленные шрифтовые имена лиц. Когда требуется шрифт, пользователь агент перебирает список ссылок, используя первый он может успешно активироваться. Шрифты, содержащие неверные данные или локальные шрифты, которые не найдены, игнорируются, и пользовательский агент загружает следующий шрифт в списке.

...

Внешние ссылки состоят из URL-адреса, а затем необязательного подсказки описывающий формат ресурса шрифта, на который ссылается этот URL. format содержит список строк формата, разделенных запятыми, которые обозначают известные шрифтовые форматы. Соответствующие пользовательские агенты должны пропускать загрузка ресурса шрифта, если только подсказки формата указывают неподдерживаемых или неизвестных форматов шрифтов. Если не указаны подсказки формата, пользовательский агент должен загрузить ресурс шрифта.
    /* load WOFF font if possible, otherwise use OpenType font */
    @font-face {
      font-family: bodytext;
      src: url(ideal-sans-serif.woff) format("woff"),
           url(basic-sans-serif.ttf) format("opentype");
    }