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

Question

使用@font-face的正确方法是什么，这样浏览器就不会下载用户已经拥有的字体？

我正在使用@font-face 来定义 DejaVu，它已经安装在我的系统 (linux) 上。 Firefox 没有下载字体，但 Chromium 每次都在下载！

我的 CSS 代码基于 font squirrel 和 that question 如下所示：

@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');
}

有更详细的描述of what to do here。

Answer 2

我实际上并没有对font-face 做任何事情，所以请稍加注意，但我认为浏览器没有任何方法可以明确判断用户机器上是否安装了给定的网络字体或不是。

例如，用户可以在其计算机上安装具有相同名称的不同字体。唯一确定的方法是比较字体文件以查看它们是否相同。如果不先下载您的网络字体，浏览器就无法做到这一点。

当您在font 声明中实际使用字体时，Firefox 是否会下载该字体？ （例如h1 { font: 'DejaVu Serif';）？