Когда загружаются веб-шрифты и можно ли их предварительно загрузить?

Question

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

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

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

Вот CSS, который я использую для загрузки своих веб-шрифтов:

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Italic-webfont.eot');
    src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Italic-webfont.woff') format('woff'),
         url('../fonts/Roboto-Italic-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold-webfont.eot');
    src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light-webfont.eot');
    src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Light-webfont.woff') format('woff'),
         url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium-webfont.eot');
    src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Medium-webfont.woff') format('woff'),
         url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: 500;
    font-style: normal;
}

Answer 1

Когда загружаются веб-шрифты?

Пол Айриш сделал простую страницу, чтобы проверить это: http://dl.getdropbox.com/u/39519/webfontsdemo/loadtest.html

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

Причиной загрузки при использовании, а не при объявлении является уменьшение ненужного сетевого трафика, например, если шрифт объявлен, но не используется.

Можно ли избежать загрузки шрифтов?

Вы правы, если шрифты уже установлены, их не нужно загружать. Как сказал @Patrick выше, это можно сделать с помощью local(), Это помещено перед url() в CSS и берет имя шрифта (имя PostScript впоследствии необходимо для Safari в Mac OS X). Попробуйте внести следующие изменения в свой CSS:

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: local(Roboto Regular), local(Roboto-Regular),
         url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Наконец, чтобы сократить время загрузки шрифтов, вы можете убедиться, что вы делаете следующее:

• Помещение CSS перед JavaScript
• Добавление далекого будущего Expires заголовки для шрифтов (поэтому браузер их кеширует)
• GZipping шрифты

Вот хорошее резюме по поводу задержки отображения шрифта: http://paulirish.com/2009/fighting-the-font-face-fout/