CSS - 无法解析本地 ttf 文件？答案

【问题标题】：CSS - Can't resolve local ttf file?CSS - 无法解析本地 ttf 文件？
【发布时间】：2020-04-27 03:51:35
【问题描述】：

好的，常见问题 - 只是尝试包含自定义字体。我尝试了多种方法，包括：

@font-face {
    font-family: SequelSansBlackDisp;
    src:"./src/resources/SequelSansBlackDisp.ttf";
}
@font-face {
    font-family: SequelSansLightDisp;
    src:"./src/resources/SequelSansLightDisp.ttf";
}

和

@font-face {
    font-family: SequelSansBlackDisp;
    src:url("./src/resources/SequelSansBlackDisp.ttf");
}
@font-face {
    font-family: SequelSansLightDisp;
    src:url("./src/resources/SequelSansLightDisp.ttf");
}

无济于事。第一个不做任何事情，而第二个绘制“无法解决”错误。字体就在资源文件夹中 - 我确实重命名了 ttf 文件以删除空格。也许这就是问题所在？我怎么知道如何正确引用 ttf 文件？

【问题讨论】：

font-family 名称必须与嵌入文件（元数据）中的名称相同，不一定与文件名相同。在 windows10 上，您可以右键单击文件名并点击预览，它将弹出一个对话框，并在顶部为您提供 Font Name。
字体系列名称用引号括起来，并确保您的相对路径是 ../ 而不是 ./
供参考，这里是 google 字体服务为 Roboto 字体生成的样式表，注意区别 - fonts.googleapis.com/css2?family=Roboto&display=swap

标签： javascript html css fonts

【解决方案1】：

试试这个解决方案：

@font-face {
  font-family: fontName;
  font-style: normal;
  font-weight: normal;
  url('/static/fonts/dir/font_name.ttf') format('truetype');
}

【讨论】：

【解决方案2】：

你可以试试这个。

@font-face {
    font-family: SequelSansBlackDisp;
    src:url('./src/resources/SequelSansBlackDisp.ttf') format('truetype');
}
@font-face {
    font-family: SequelSansLightDisp;
    src: url('./src/resources/SequelSansLightDisp.ttf') format('truetype');
}

【讨论】：

我仍然收到 Can't resolve './src/resources/SequelSansBlackDisp.ttf' 错误
看字体路径，对吗？使用小写字母作为字体 URL。大写字母在 IE 中会产生意想不到的结果！