web-dev-qa-db-fra.com

@ font-face src: local - Comment utiliser la police locale si l'utilisateur l'a déjà?

Quelle est la bonne façon d'utiliser @font-face afin que le navigateur ne télécharge pas la police si l’utilisateur l’a déjà?

J'utilise @ font-face pour définir DejaVu, qui est déjà installé sur mon système (linux). Firefox ne télécharge pas la police, mais Chromium la télécharge à chaque fois!

Mon code CSS, basé sur font squirrel et cette question ressemble à ceci:

@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;
}
cssfont-face
61
dbarbosa

Si vous voulez d'abord vérifier les fichiers locaux, faites:

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

Il existe une description plus élaborée de ce qu'il faut faire ici .

79
Thariama