CSS 嵌入字体不出现在使用括号的网页上

Question

我是 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，我正在做预期的事情，尽管我没有提供任何后备方案（我应该这样做，如果是的话，怎么做？）。

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>

到目前为止就是这样。虽然，正如我提到的，我没有添加任何回退或做任何复杂的事情，header 文本 Site Name Here 在实时预览中以衬线 Times New Roman 显示。

我做错了什么？

请注意，我已经查看了 Stack Overflow 上的 all of these 个帖子，但 none 对我有所帮助； w3schools 也没有。另请记住，实时预览运行 Chrome.

的实例

Answer 1

您可以检查几项内容。首先，查看检查器，看看你是否正确 link 字体。

您还应该 link 到 css 文件：

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

您还link编辑了头部标签之外的文件。

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

Answer 2

尝试为字体添加整个 URL。

检查是否有效。

Answer 3

从此处下载 Fonarto 的@font-face，然后在包含字体和 stylesheet.css.

的同一文件夹中添加 index.html 和后续代码

HTML

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
  <div>Hello</div>
</body>
</head>
</html>

也添加到stylesheet.css

body {
    font-family: 'fonarto_regular';
}

对我来说它工作正常！

CSS 嵌入字体不出现在使用括号的网页上

CSS Embedded Font Does Not Appear On Webpage Using Brackets

html

css

fonts

embed

font-face