@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';)?