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

Question

如果浏览器确定客户端操作系统上已安装 CSS 导入的字体，是否会忽略

@font-face

？

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

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

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

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

1. 确保 CSS

   @font-face

   规范使用与系统上安装的 font-family

    不同的

   字符串。

2. 在 CSS 中的其他位置引用字体时，请使用：

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

Answer 1

来自我问题的编辑：

这似乎解决了问题：

1. 确保 CSS

   @font-face

   规范使用与系统上安装的 font-family

    不同的

   字符串。

2. 在 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");
}