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

【问题标题】：Can I force the browser to use CSS @font-face instead of font installed on system?我可以强制浏览器使用 CSS @font-face 而不是系统上安装的字体吗？
【发布时间】：2014-11-15 13:12:49
【问题描述】：

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

我在我的系统上安装了一些不常见的字体用于设计等。根据它们是否安装在客户端操作系统上，浏览器在呈现这些字体时似乎略有不同。我的猜测是，如果浏览器确定字体已安装在客户端操作系统上，则会忽略 CSS 字体导入。

这样做的问题是，这些呈现差异，无论多么轻微，都会影响间距、定位和对齐方式，导致我看到的页面版本与访问者不同。我必须卸载字体（每次都很痛苦）或在虚拟机中预览它（不那么痛苦，但仍然很痛苦）。

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

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

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

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

【问题讨论】：

我的经验是，如果您定义 @font-face 然后在 css 文件 (body { font-family: 'myfontname' }) 中调用它，那么它将忽略客户端操作系统上安装的所有内容，并将您的字体安装在服务器上...
尝试使用字体真实名称以外的其他名称来描述您在 css 中的字体。我认为它会欺骗浏览器，让你实现你想要的。
@ShirinAbdolahi：这正是我所做的，这就是为什么这更加奇怪。
请将此信息添加到您的问题中。
@MarcusRommel：见编辑

标签： html css fonts

【解决方案1】：

来自我的问题中的编辑：

这似乎解决了问题：

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

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

【讨论】：

这是一个很好的解决方法...我有一个类似的问题，我忘记包含字体，但因为它安装在我的系统上，我没有意识到它没有渲染其他浏览器，直到启动后。无论如何要重命名谷歌字体？

【解决方案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");
}

【讨论】：