使用font-face导入字体失败

Question

这是我的style.css

@font-face {
  font-family: 'Lato-Regular';
  src: url("../../fonts/Lato-Regular.woff") format("woff"), url("../../fonts/Lato-Regular.woff2") format("woff2");
}

html文件

  <div class="text-center" style="font-family:Lato-Regular;color:#bef4f7;margin-top:-23px;font-size:32px">
                Text Example
            </div>

失败并抛出我的错误

我做错了什么？

Answer 1

这是你的文件路径。它会进入一个名为“assets”的文件夹。也许文件路径应该是url（“../ fonts / Lato-Regular.woff”）（少一个../）（或者一个 - 只是在这里猜测，但无论如何，检查文件路径）

Answer 2

检查并查看www / assets / fonts / present中的字体文件。

Answer 3

您的路径可能不正确，您获得的错误属于该类型。考虑在图像上显示完整路径错误以及CSS文件，这可以100％确认。

此外，我可以建议为什么不使用谷歌的CDN，它将为您提供更好的跨浏览器兼容性。

＆＃13;

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<div class="text-center" style="font-family:Lato;color:#bef4f7;margin-top:-23px;font-size:32px">
  Text Example
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

请使用使用CDN的字体及谷歌的免费字体

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

或 如果你想在本地使用，请将所有下载的字体粘贴到适当的文件夹中，它将有效地工作。