Question

使用<代码>@font-face的正确方式如果用户已经下载,浏览器不会下载字体吗?

I am using @font-face to define DejaVu, which is already installed on my system (linux). Firefox is not downloading the font, but Chromium is downloading it every time!

My 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;
}

Answer 1

如果你想首先检查当地档案:

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

http://www.broken-links.com/2009/06/30/eck-for-insated-fonts-with-font-face-and- local/“rel=“noreferer”>,其中的内容如下:

Answer 2

如果某人仍需要,则:

• 从字体上下载你需要的字体,然后将文件放在:

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

注:确保通往工作队档案的道路正确。

Answer 3

相反,这是一个老的讨论,但有人来到这个地方,这里还有一些信息。

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

复印件代码可能无法100%正确,因此低于我使用的内容(并完美运作):

/* 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).

还包括使用微笑(你想要使用)的“防弹”解决办法(防止带宽)——见。

友情链接