无法加载字体答案

【问题标题】：Unable to load fonts无法加载字体
【发布时间】：2016-08-03 17:34:49
【问题描述】：

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

解码下载字体失败：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>

谁能指导我什么是错误的，我无法加载我的字体？

【问题讨论】：

只是想知道，这是正确的文件路径吗？只是想确保你的意思是说 ./ 而不是 ../
是的，这是正确的路径。在我的控制台中看到我看到浏览器试图在这里获取它：localhost:3000/assets/fonts/Overpass-Bold.ttf 并且与我的文件夹结构匹配
明白了。只是想仔细检查一下。我知道我以前用 xampp 发生过这种情况。
感谢您的仔细检查，这可能是问题所在，但似乎并非如此......
@font-face { font-family: "Light"; src: url("../assets/fonts/Overpass-Light.ttf") 格式('truetype'); }

标签： html css fonts

【解决方案1】：

我认为你的 CSS 语法不正确

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

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

【讨论】：

【解决方案2】：

检查您的 Web 服务器是否有权读取包含字体和字体文件本身的文件夹。还要检查他们的权限不是“禁止”的文件 - 并且应该由您的网络服务器用户（或“每个人”）读取。
确保这些字体的 URL 路径正确；您也可以使用同一 CSS 文件中的背景图像 URL 来测试它以测试相对路径。
如果上述情况正常，则特定字体文件可能有问题，或者您的 Web 服务器可能无法正确传输二进制数据。当您覆盖默认的网络服务器行为并通过其他方式流式传输数据时，可能会导致后者。
使用您知道会起作用的网络字体尝试上述方法，例如“FontAwesome”；如果失败了，那么唯一剩下的就是二进制数据传递不正确——所以可能会在前面或附加上额外的“空白”——这很容易发生在嵌入语言中，比如 PHP。
李>
如果是上面最后一点所述的问题，可以通过在传送字体数据之前和之后清除输出缓冲区来轻松解决。在 PHP 中，可以使用 ob_get_clean() 清理（和检查）输出缓冲区。

【讨论】：

【解决方案3】：

这是我的字体代码：

@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不渲染字体存在一些问题。

【讨论】：