@ 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;
}
135262 次浏览
小开
最佳答案

If you want to check for local files first do:

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

There is a more elaborate description of what to do here.

小开

In case someone still need it:

Download the font you need from fonts.google.com, then set your CSS file:

@font-face { font-family: roboto-regular; src: url('./fonts/Roboto-Regular.ttf'); }
body {
font-family: roboto-regular;
}

Note: make sure the path to the TTF file is correct.

小开

Rather an old discussion, but is someone comes to this place, here some more infos.

  1. goto https://google-webfonts-helper.herokuapp.com/fonts
  2. select there the font(s) you need/want
  3. downlaod the selected fonts
  4. copy the displayed css

The copied css code may not be 100% correct, so below what I have been using (and works perfectly):

/* open-sans-regular - vietnamese_latin_hebrew_greek_cyrillic     */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.eot'); /* IE9 Compat Modes */
src: local('😡');
src: url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.svg#OpenSans') format('svg'), /* Legacy iOS */
url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.woff2') format('woff2'); /* Super Modern Browsers */
}

Inside the edited code you can delete the comments (after each url(..) line. And finally - as tipp: pack the source, in general the packed file is ~ 30% smaller (and your website will have the benefit).

Edit: updated code snippet to be actual. The font ordering is based on the fact, that browsers read from bottom to top (see https://stackoverflow.com/a/22835957/3450837).

It includes also the "bulletproof" solution where a smiley (which one you want to use is up to you) is used (to prevent wasting bandwidth) - see https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/


提交答案