如何在HTML文档中链接到.woff字体文件

Question

如何在HTML文档中链接到.woff字体文件

htmlcssfont-facefont-family

7

我有一个问题，我在电脑上安装了一个字体，并想将其应用于 HTML5 / CSS3。与重复的问题不同之处在于：我明确询问要在 .html 文件中输入什么，这是重复问题中未解答的问题。

解决问题后的更新：

1）.html 文件中不应包括 <link href=....> 行。

2）.woff 字体文件必须与 .css 文件位于同一目录中。

以下是我的最小工作 CSS：

@font-face{
    font-family: Reef;
    src: local('../Fonts/Reef/reef-webfont.woff'), url('../Fonts/Reef/reef-webfont.woff') format('woff');
}

body, h1, h2{   
    text-align:center;
    font-family: 'Reef', monospace; 
}

这是我的最小工作HTML文件：

<html>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/
    libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript"></script>    

    <head>
        <link rel="stylesheet" type="text/css"   href="bootstrap.css" />
        <link rel="stylesheet" href="stylesGrilcheeserie.css" type="text/css"/>     
        <link href='../Fonts/Reef/reef-webfont.woff' rel='stylesheet' type='text/css'>
        <title> Grilcheeserie </title>          
    </head>

    <body>

        <h1>La Grilcheeserie</h1>       

    </body>
</html>

无论我做什么，我的页面都会显示备选字体"monospace"，而不是"Reef"字体。

我的问题是：我如何在html中正确引用字体源？据我从搜索答案中得知，我的css应该是正确的。

我正在使用Windows 10上的Firefox浏览器。

- Hiroshima

可能是@font-face指向本地文件的URL的重复问题。 - Asons

你也可以查看这篇文章：https://dev59.com/pm865IYBdhLWcg3wZNrT - Asons

你的文件夹结构是什么样子的？ - Jesse Kernaghan

@ Jesse Kernaghan：最高层级：/HTML-CSS-JS。然后Fonts/和Grilcheeserie/在同一级别上。.html和.css文件位于Grilcheeserie/内部。字体.eot、.woff和.otf文件位于Fonts/Reef/内部，其中Fonts与前一句中的文件夹相同。 - Hiroshima

@LGSon：你提到的帖子没有解决在 .html 文件的 head 部分中应该放置哪一行代码的问题。 - Hiroshima

你不应该这样引用字体文件。"Head in Cloud" 已经给了你关于这个问题的答案。 - Asons

2个回答

2

根据我的理解，你的“local”源应该只显示字体名称，因为它已经安装在你的计算机上了。“url”源应该指向字体文件相对于你的CSS文件位置的路径： local('Reef'), url('/Path/To/My/Font/reef-webfont.woff')

- Jamie Barker

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Head In Cloud · Accepted Answer

<link href='../Fonts/Reef/reef-webfont.woff' rel='stylesheet' type='text/css'>你不能像这样引用字体。

@font-face{
font-family: Reef;
src: url('reef-webfont.woff'), url('reef-webfont.woff') format('woff');}

把您的字体放在与此样式文件相同的目录中。