无法加载字体

Question

当我尝试将字体加载到 Spectacle 样板时，出现以下错误：

无法解码下载的字体：http://localhost:3000/assets/fonts/Overpass-Bold.ttf
OTS 解析错误：版本标签无效

我添加了格式类型，并通过 html 文件中的样式标签加载我的样式。

另外，我认为这可能是一个 webpack 问题，所以我也将其添加到 webpack 配置文件中：

{
  test: /\.ttf$/,
  loader: "url-loader?limit=100000&mimetype=application/font-ttf"
}

<style>
  @font-face {
    font-family: "Bold";
    src: url("./assets/fonts/Overpass-Bold.ttf") format('truetype');
  }
  @font-face {
    font-family: "Regular";
    src: url("./assets/fonts/Overpass-Regular.ttf") format('truetype');
  }
  @font-face {
    font-family: "Light";
    src: url("./assets/fonts/Overpass-Light.ttf") format('truetype');
  }
</style>

任何人都可以指导我什么可能是错误的并且我无法加载我的字体吗？

Answer 1

这是我的字体代码：

@font-face 
{
  font-family: "BebasNeue_Regular";
  src: url("../../Resource/Font/Bebas Neue/.eot?#iefix") format("embedded-opentype"), url("../../Resource/Font/Bebas Neue/.woff") format("woff"), url("../../Resource/Font/Bebas Neue/.ttf") format("truetype"), url("../../Resource/Font/Bebas Neue/.svg#BebasNeue_Regular") format("svg");
  font-weight: normal;
  font-style: normal;
}

这是回调：

h1
{
    font family: 'BebasNeue_Regular';
}

存在一些问题： 1.也许你的浏览器不支持字体文件 -> 这就是为什么我使用一些 src url 进行回调。 2.您确定文件名正确吗？ 3. 如果是，请尝试使用浏览器访问字体 url，是否有效或丢失。 4. Firefox 存在一些问题，在本地启动期间不渲染字体。

Answer 2

• 检查您的网络服务器是否有权读取包含字体和字体文件本身的文件夹。还要检查文件的权限是否为“禁止” - 并且应该可由您的网络服务器用户（或“每个人”）读取。

• 确保这些字体的URL路径正确；您还可以使用同一 CSS 文件中的背景图像 URL 来测试相对路径。

• 如果上述情况正常，则特定字体文件可能有问题，或者您的网络服务器可能无法正确传输二进制数据。当您覆盖默认的 Web 服务器行为并通过其他方式传输数据时，可能会导致后者。

• 使用您知道可以使用的网络字体尝试上述操作，例如“FontAwesome”；如果失败，那么唯一剩下的就是二进制数据传递不正确 - 因此可能会在前面或后面添加额外的“空格” - 这对于像 PHP 这样的嵌入语言来说很容易发生。

• 如果是上面最后一点所述的问题，可以通过在传递字体数据之前和之后清除输出缓冲区来轻松修复。在 PHP 中，可以使用以下命令清理（和检查）输出缓冲区：

  ob_get_clean()

  .

Answer 3

我认为你的 CSS 语法不正确

  @font-face {
    font-family: "Bold";
    src: url("../assets/fonts/Overpass-Bold.ttf") format('truetype');
  }

立即尝试 您的字体路径不正确，您添加了一个点而不是两个点

Answer 4

补充大家都说的话：

在我的例子中，字体文件名中有一个

-

，作为单词之间的分隔符。我尝试了一切让浏览器加载它，但它不会，最终唯一有效的方法是从文件名中删除破折号，然后它就起作用了！ （在 Firefox 和 Edge 上测试）

我会更进一步建议字体文件名没有特殊字符或空格等。

什么不起作用：

cairo-bold.tff

有什么作用：

cairoBold.tff