@font-face 中的 ttf 文件无法在 Windows 笔记本电脑上运行

Posted 2023-02-19

【中文标题】@font-face 中的 ttf 文件无法在 Windows 笔记本电脑上运行

【英文标题】：ttf file in @font-face is not working on a Windows laptop

【发布时间】：2022-01-07 11:52:27

【问题描述】：

我是网络开发新手，不确定这是否是一个常见问题。我试图使用 font-face 来实现 TTF 格式的字体。

我试过了

@font-face 
  font-family: "Univers-light-normal";
  src: url(font-family/Univers-light-normal.ttf);

还有

@font-face 
  font-family: "Univers-light-normal";
  src: url(font-family/Univers-light-normal.ttf) format("truetype");

但都没有奏效。我还尝试清除浏览器的缓存，但仍然无法正常工作。虽然这次我在 Mac 上打开了相同的 html/CSS 文件（最初使用的是 Windows 笔记本电脑，但在两台笔记本电脑上都使用了 Google Chrome），但它似乎确实可以工作。

我已经安装了字体。第一个代码适用于 OTF 文件就好了。我猜我得到的文件是 Mac TrueType 字体而不是 Windows TrueType 字体？如果是这样，有没有办法区分？我怎样才能让它在 Windows 笔记本电脑上工作？

如果还有其他可能的原因这不起作用，请告诉我。

【问题讨论】：

哪个浏览器在哪个 Windows 操作系统上？

Windows 10 Pro 上的 Google Chrome，64 位版本

在 Chrome 中，如果您按 F12，您将进入开发者工具。如果你查看网络标签（docs），你可以检查浏览器是否找到了字体文件，在console tab它会告诉你任何错误。

【参考方案1】：

你可以试试这个，因为它对我有用：

src 的单引号 尝试准确找到包含 TTF 文件的文件夹，例如“./fonts/SFAtarianSystem.ttf”

或者你可以看看这个：

@font-face 
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, android, ios */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

另外，尝试使用字体的 URL（更实用）而不是本地的，因为有时如果不重新加载字体可能会导致问题。