Question

所以我已经在这个问题很长一段时间了，发布了一个问题但决定删除它，因为我已经使用bootstrap了...现在继续这件事，当我尝试调试页面时，我的main.css和bootstrap.css已加载但我的自定义字体没有..我现在丢失了为什么我的字体将无法加载..这里是示例代码..

的main.css

@font-face {
    font-family: 'Arvo';
    url("../fonts/custom/Arvo-Regular.woff") format("woff");
    font-weight: normal; 
    font-style: normal; 
}

for boostrap.css - 我已经在他们的网站上定制了它，包括我的自定义字体 enter image description here

然后在我的index.html上

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/main.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">

  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

然后是我的Chrome调试器， enter image description here

我现在真的迷路了，因为它不会加载我的字体...我不知道怎么样，已经阅读了一些线程，但他们都指向我上面的修改，不会加载我的字体< / p>

更新

enter image description here

Answer 1

您确定您有任何实际使用自定义字体的内容。从屏幕截图来看，您似乎使用sans serif系列作为基本字体系列，该堆栈中的第一个字体是Helvetica Neue。如果您正在Mac或其他安装了Helvetica Neue的系统上进行测试，那么浏览器将永远不会尝试在您的堆栈中加载第二种字体（这是您的自定义字体）。

<强>更新

你的语法错了。您需要设置src属性：

@font-face {
    font-family: 'Arvo';
    src: url("../fonts/custom/Arvo-Regular.woff") format("woff");
    font-weight: normal; 
    font-style: normal; 
}

Bootstrap上的HTML自定义字体不起作用

1 个答案: