@ font-face src:local-如果用户已经拥有本地字体,如何使用?


80

什么是正确的使用方式,@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;
}

Answers:


102

如果要先检查本地文件,请执行以下操作:

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

还有一个更详尽的描述的在这里做什么


3
如果我们有2src秒(如OP的示例)怎么办?我们穿local第一个还是第二个?
mpen 2015年

-7

我实际上并没有做任何事情font-face,因此请稍作努力,但是我认为浏览器没有任何方法可以明确地确定用户计算机上是否安装了给定的Web字体。

例如,用户可以在其计算机上安装具有相同名称的其他字体。确定的唯一方法是比较字体文件以查看它们是否相同。而且,浏览器必须先下载您的网络字体才能执行此操作。

当您在font声明中实际使用字体时,Firefox是否会下载该字体?(例如h1 { font: 'DejaVu Serif';)?


好吧,我猜字体名称问题在这里影响不大(我从来没有遇到任何问题)
Thariama 2010年

是的,我想碰撞是不可能的。继续。
Paul D. Waite

5
CSS中的font / font-family不会使浏览器下载任何内容。如果找不到本地字体,则将其忽略。这就是为什么我们通常使用字体栈(字体列表)的原因-如果它没有第一个字体,它将尝试第二个字体,依此类推。@字体面的东西比较“新”(stackoverflow.com/questions/2219916/is-font-face-usable-now
dbarbosa

@dbarbosa:我知道如何font/font-family工作。我只是显然不知道如何@font-face工作!
Paul D. Waite
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.