Question

我对网络开发很陌生，所以如果这是一个愚蠢的错误，我道歉，但我似乎无法获得我在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的实例。

Answer 1

您可以查看一些内容。首先，查看检查器，看看你是否正确链接到字体。

此外，您应该以这种方式链接到css文件：

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

您还链接到头标记之外的文件。

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

Answer 2

尝试添加字体的完整网址。

检查是否有效。

Answer 3

从此处下载Fonarto的@ font-face，然后使用fonts和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嵌入字体不会出现在使用括号的网页上

3 个答案: