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

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

Это не совсем идеально, и это заставляет меня думать, что веб-сайты не загружаются при загрузке файла 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;
}

Ответы

Ответ 1

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

Paul Irish сделал простую страницу, чтобы проверить это: 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 для шрифты (поэтому браузер кэширует их)
  • GЗащить шрифты

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