Загружаются ли шрифты @ font-face браузером, даже если они не используются? - PullRequest
Новая
       9

Загружаются ли шрифты @ font-face браузером, даже если они не используются?

5 голосов
/ 29 июня 2010

Итак, у меня есть этот стек: 

 @font-face {
    font-family: 'MyCustomFont';
    src: url('MyCustomFont.ttf') format('truetype');
 }

 body { font-family: Helvetica, MyCustomFont, Arial, sans-serif; }

Загружается ли MyCustomFont.tff браузером, даже если в аппарате присутствует Helvetica (т.е. пользователи Mac)?

Ответы [ 2 ]

4 голосов
/ 29 июня 2010

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

@font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"),
    local("HelveticaNeue-Bold"),
    url(MgOpenModernaBold.ttf);
    font-weight: bold;
}

Приведенный выше пример взят здесь:
https://developer.mozilla.org/en/css/@font-face

Здесь есть дополнительная информация:
http://www.broken -links.com / 2009/06/30 / проверка-за установленными-шрифты-с-купелью-вбрасывания и локальной /

После загрузки шрифта он будет кэширован браузером. Попав в кеш, браузеру не нужно будет снова загружать шрифт, тем самым ускоряя процесс. Смотрите здесь для получения дополнительной информации:
http://code.google.com/apis/webfonts/faq.html#Performance

1 голос
/ 10 апреля 2012

Джейк Арчибальд очень хорошо рассказал об этом в Dibi 2011.

Вы можете увидеть здесь: http://vimeo.com/27771157 мин.11: 59

А здесь: http://speakerdeck.com/u/jaffathecake/p/in-your-font-face?slide=39

...