Question

如果浏览器确定客户端操作系统上已经安装了CSS导入的字体，那么它们会忽略@font-face吗？

我的系统上安装了许多不常见的字体用于设计等。看起来浏览器会根据它们是否安装在客户端操作系统上而略有差异地呈现这些字体。我的猜测是，如果确定该字体已经安装在客户端操作系统上，浏览器会忽略CSS字体导入。

这个问题是这些渲染区别（无论多么微小）会影响间距，定位和对齐，导致我看到页面的不同版本而不是访问者。我必须卸载字体（每次都要做的痛苦）或者在虚拟机中预览（不那么痛苦，但仍然很痛苦）。

我有什么方法可以告诉CSS，“只使用CSS导入中的这种特定字体而忽略安装在客户端操作系统上的字体？”

编辑：这似乎解决了这个问题：

确保CSS @font-face规范使用font-family的不同字符串，而不是系统上安装的字符串。
在CSS中的其他位置引用字体时，请使用：

font-family: System Installed Font Name, 'Imported Font Name', Fallback Font;

Answer 1

来自我的问题中的修改：

这似乎解决了这个问题：

确保CSS @font-face规范使用font-family的不同字符串，而不是系统上安装的字符串。
在CSS中的其他位置引用字体时，请使用：

font-family: System Installed Font Name, 'Imported Font Name', Fallback Font;

Answer 2

确保您考虑字体变体（粗体，斜体）。

我这样解决了：

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}

Answer 3

每当您实现自己的font-face时，浏览器都会使用它。您不需要强制它，因为您的字体可以具有相同的名称，但这并不意味着它与安装的字体相同。因此，如果安装了字体没有区别，浏览器将使用@ font-face中定义的内容。

如果浏览器在使用与安装字体同名的字体时出现问题 - 只要我这样做，我就不会想到它 - 重命名它。这样就可以了。

如果您的字体不可用或未正确定义，浏览器将回退到系统字体。

编辑：我只是想说我用我们的测试系统安装的字体制作了许多网站，而且浏览器从未使用过已安装的字体。

我可以强制浏览器使用CSS @ font-face而不是系统上安装的字体吗？

3 个答案: