Question

我有一个问题。我想使用自定义字体，.woff，.woff2，.eot，.ttf，.svg等。所有这些文件都在一个名为“字体”的文件夹中。

我尝试通过@ font-face访问它们，但该字体未显示在网站上。因此，我在一个空白页上进行了尝试，因此没有引导CSS或其他任何干扰，但是问题仍然没有解决。

这是我的CSS

@font-face {
 font-family: 'Bauhaus93'
src: 
      url('/fonts/BAUHS93.woff') 
           format('woff'), 

      url('/fonts/BAUHS93.woff2') 
           format('truetype');

}

这是我的html，我也在其中放置了Google网络字体，以检查托管字体是否也会被忽略。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/css/style.css" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>

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

    <p style="font-family: 'Montserrat'">TEST text test </p>
    <p style="font-family: 'Bauhaus93'">TEST text test </p>

   </body>
</html>

Answer 1

如果字体位于相同的子文件夹中，请在/的开头删除url()。

如果您的字体文件夹不在子文件夹中，则需要../而不是/前面的url()。每个../后退1个文件夹，因此您可以通过这种方式找到字体文件夹。

例如：

url('../fonts/BAUHS93.woff') format('truetype');

Answer 2

问题是您在此处使用了错误的语法。您应该删除正斜杠。当您的字体位于当前网站根目录的fonts文件夹中时，将使用/。

好的，我没有在注释中看到您提供的文件路径。我将编辑答案。文件路径：文件夹/字体/BAUHS93.woff;文件夹/test.html;文件夹/css/style.css;

此语法错误-

url('/fonts/BAUHS93.woff')

将其更改为此-

url('../fonts/BAUHS93.woff')

当文件位于当前文件夹上一层的文件夹中时，应使用此选项

或者，您可以链接HTML-

中的字体

<link href="fonts/BAUHS93.woff" rel="stylesheet">

，只需在CSS中使用font-family: 'Bauhaus93';

但是您说即使这样也不行。如果不是，则应检查名称和路径，也可以尝试链接网络字体。您的文件可能有错误，或者您使用的字体名称与字体文件中定义的名称不同。

我还看到您已经在HTML文件中链接了蒙特塞拉特（Montserrat），并且该字体应该可以正常工作。如果连网络字体都没有，您应该尝试在样式标签style="font-family: 'Montserrat';"中添加分号，尽管它不会有所作为，因为CSS通常会忽略分号的出现。

自定义字体未显示在输出中

2 个答案: