Как правильно использовать, @font-face
чтобы браузер не загружал шрифт, если он уже есть у пользователя?
Я использую @ font-face для определения DejaVu, который уже установлен в моей системе (Linux). Firefox не загружает шрифт, но Chromium загружает его каждый раз!
Мой код CSS, основанный на белке шрифта, и этот вопрос выглядит так:
@font-face {
font-family: 'DejaVu Serif';
src: url('DejaVuSerif-webfont.eot');
src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');
font-weight: normal;
font-style: normal;
}
/* ... @font-face definitions for italic and bold omitted ... */
@font-face {
font-family: 'DejaVu Serif';
src: url('DejaVuSerif-BoldItalic-webfont.eot');
src: local('DejaVu Serif Bold Italic'), url('DejaVuSerif-BoldItalic-webfont.woff') format('woff'), url('DejaVuSerif-BoldItalic-webfont.ttf') format('truetype'), url('DejaVuSerif-BoldItalic-webfont.svg#webfontQAewh7pf') format('svg');
font-weight: bold;
font-style: italic;
}
Ответы:
Если вы хотите сначала проверить локальные файлы, выполните:
@font-face { font-family: 'Green Sans Web'; src: local('Green Web'), local('GreenWeb-Regular'), url('GreenWeb.ttf'); }
Здесь есть более подробное описание того, что делать .
источник
src
с (как в примере с OP)? Надеваемlocal
первую или вторую?На самом деле я ничего не сделал с этим
font-face
, так что отнеситесь к этому с долей скепсиса, но я не думаю, что у браузера есть какой-либо способ окончательно определить, установлен ли данный веб-шрифт на машине пользователя или нет.Например, пользователь может установить на своем компьютере другой шрифт с тем же именем. Единственный способ точно сказать - сравнить файлы шрифтов, чтобы увидеть, идентичны ли они. И браузер не смог бы этого сделать, не загрузив сначала ваш веб-шрифт.
Загружает ли Firefox шрифт, когда вы действительно используете его в
font
объявлении? (напримерh1 { font: 'DejaVu Serif';
)?источник
font
/font-family
работаю. Я просто не знаю, как@font-face
работает!