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


83

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

Ответы:


104

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

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

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


3
Что, если у нас есть 2 srcс (как в примере с OP)? Надеваем localпервую или вторую?
mpen

-7

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

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

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


ну, проблема с названиями шрифтов здесь не имеет
большого значения,

Да, думаю, столкновение маловероятно. Продолжать.
Пол Д. Уэйт

5
font / font-family в css не заставляет браузер ничего загружать. Если он не находит шрифт локально, он игнорирует его. Поэтому обычно мы используем стек шрифтов (список шрифтов) - если в нем нет первого, он пробует второй и так далее. @ font-face - это что-то относительно "новое" ( stackoverflow.com/questions/2219916/is-font-face-usable-now )
dbarbosa 01

@dbarbosa: Я умею font/ font-familyработаю. Я просто не знаю, как @font-faceработает!
Пол Д. Уэйт
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.