代码之家 › 专栏 › 技术社区 › jmindel

CSS嵌入字体不显示在使用括号的网页上

font-face embed fonts css html

jmindel · 技术社区 · 9 年前

我对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显示。

我做错了什么?

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

3 回复 | 直到 7 年前

Olli 9 年前

有一些事情你可以检查。首先,查看检查器,查看是否正确链接到字体。

此外,您应该以以下方式链接到css文件:

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

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

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

Jared 9 年前

尝试为字体添加整个URL。

检查这是否有效。

AleshaOleg 9 年前

下载@font face of Fonarto 从这里开始,然后添加索引。html,在同一文件夹中使用字体和stylesheet.css。

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';
}

对我来说,一切都很好!