我是Web开发的新手,所以如果这是一个愚蠢的错误,我深表歉意,但是我似乎无法获得嵌入到我的CSS样式表Fonarto中的字体出现在我的网页上。我正在使用Brackets创建网站,并通过实时预览主动查看它,所以我想知道这是否对创建此问题有帮助。鉴于我没有CSS经验,因此我使用fontsquirrel.com自动生成代码,该代码将使用@font-face添加字体。这就是它生成的内容,并进行了一些调整(字体存储在resources/fonts/fonarto/regular中)

@font-face {
    font-family: 'fonarto_regular';
    src: url('resources/fonts/fonarto/regular/fonarto-webfont.eot');
    src: url('resources/fonts/fonarto/regular/fonarto-webfont.eot?#iefix') format('embedded-opentype'),
         url('resources/fonts/fonarto/regular/fonarto-webfont.woff2') format('woff2'),
         url('resources/fonts/fonarto/regular/fonarto-webfont.woff') format('woff'),
         url('resources/fonts/fonarto/regular/fonarto-webfont.ttf') format('truetype'),
         url('resources/fonts/fonarto/regular/fonarto-webfont.svg#fonartoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


为了增加样式,我正在做预期的事情,尽管我没有提供任何后备功能(我应该这样做,如果可以,怎么做?)。

body {
    font-family: 'fonarto_regular';
}


我的索引页面的代码如下:

<!DOCTYPE html>
<html>
    <style rel="stylesheet" type="text/css" href="stylesheet.css"></style>
    <script>
    </script>
<head>
</head>
<body>
    <div id='index-head'>
        <h1>Site Name Here</h1>
    </div>
</body>
</html>


到目前为止,从字面上看就是这样。而且,正如我提到的那样,我没有添加任何后备或做任何复杂的事情,标题文本Site Name Here在实时预览中显示在衬线Times New Roman中。

我究竟做错了什么?

请注意,我已经看过Stack Overflow上的all of these帖子,但是没有任何帮助。也没有w3schools。另外请记住,实时预览运行的是Chrome实例。

最佳答案

您可以检查几件事。
首先,查看检查器,查看是否正确链接到字体。

另外,您还应该通过以下方式链接到css文件:

<link rel="stylesheet" href="stylesheet.css">


您还已在head标签之外链接到文件。

<html>
  <head>
   <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
  </body>
</html>

07-24 09:46
查看更多