@font-face src: local - как использовать локальный шрифт, если он уже есть у пользователя?
Как правильно использовать @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;
}
2 ответов
Если вы хотите сначала проверить наличие локальных файлов:
@font-face {
font-family: 'Green Sans Web';
src:
local('Green Web'),
local('GreenWeb-Regular'),
url('GreenWeb.ttf');
}
существует более подробное описание что здесь делать.
Я на самом деле ничего не сделал с font-face
, поэтому возьмите это с щепоткой соли, но я не думаю, что есть какой-либо способ для браузера окончательно определить, установлен ли данный веб-шрифт на компьютере пользователя или нет.
пользователь может, например, иметь другой шрифт с тем же именем, установленным на их машине. Единственный способ окончательно сказать - сравнить файлы шрифтов, чтобы увидеть, идентичны ли они. И браузер не мог сделать это без загрузки вашего веб-сайта сначала шрифт.
Firefox загружает шрифт, когда вы фактически используете его в font
декларации? (например,h1 { font: 'DejaVu Serif';
)?