@ font-face src: local - Как использовать локальный шрифт, если он уже есть у пользователя? - PullRequest
Новая
       14

@ font-face src: local - Как использовать локальный шрифт, если он уже есть у пользователя?

57 голосов
/ 01 октября 2010

Как правильно использовать @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 ]

76 голосов
/ 01 октября 2010

Если вы хотите проверить локальные файлы, сначала выполните: 

@font-face {
font-family: 'Green Sans Web';
src:
    local('Green Web'),
    local('GreenWeb-Regular'),
    url('GreenWeb.ttf');
}

Более подробное описание того, что делать здесь .

0 голосов
/ 01 октября 2010

На самом деле я ничего не сделал с font-face, так что возьмите это с щепоткой соли, но я не думаю, что у браузера есть какой-либо способ окончательно определить, установлен ли данный веб-шрифт на компьютере пользователя или нет.

Пользователь может, например, установить другой шрифт с тем же именем на своем компьютере. Единственный способ точно определить, состоит в том, чтобы сравнить файлы шрифтов, чтобы увидеть, идентичны ли они. И браузер не может сделать это без предварительной загрузки вашего веб-шрифта.

Загружает ли Firefox шрифт, когда вы фактически используете его в объявлении font? (например, h1 { font: 'DejaVu Serif';)?

...