Question

当我尝试将字体加载到Spectacle boilerplate：

时出现以下错误

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

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

有人可以指导我可能出错的地方，而且我无法加载我的字体吗？

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.也许你的浏览器不支持字体文件 - ＆gt;这就是为什么我使用一些src url进行回调。你确定文件名是否正确？ 3.如果是，请尝试使用浏览器访问字体网址，是否有效。 4.在本地启动期间，firefox存在一些无法呈现字体的问题。

Answer 2

检查您的网络服务器是否有权读取包含字体和字体文件本身的文件夹。还要检查其权限未被“禁止”的文件 - 并且应该可由Web服务器用户（ - 或“所有人”）读取。
确保这些字体的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');
  }

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

无法加载字体

3 个答案: