如何链接到 html 文档中的 .woff 字体文件
Posted
技术标签:
【中文标题】如何链接到 html 文档中的 .woff 字体文件【英文标题】：How to link to a .woff font file in html document 【发布时间】：2016-04-28 06:21:33 【问题描述】：我的计算机上安装的字体存在问题，我想将其应用于 html5/CSS3。
我的问题与其可能的重复问题有何不同：它明确询问在 .html 文件中放入什么内容，这是重复问题中未解决的问题。
问题解决后更新：
1) <link href=....> 行不得包含在 .html 文件中
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>
无论我做什么，我的页面都会显示它的备用字体、等宽字体，而不是 Reef。
我的问题是：如何正确引用 html 中的字体源？据我从搜索答案中得知，我的 css 应该是正确的。
我在 Windows 10 上使用 Firefox。
【问题讨论】：
@font-face url pointing to local file的可能重复 你也可以看看这个帖子：***.com/questions/3837249/… 你的文件夹结构是什么样的？ @Jesse Kernaghan：最高层：/HTML-CSS-JS 然后 Fonts/ 和 Grilcheeserie/ 处于相同的下一层。 .html 和 .css 在 Grilcheeserie/ 中。字体 .eot、.woff 和 .otf 文件位于 Fonts/Reef/ 中，其中 Fonts 与上一句中的文件夹相同。 @LGSon：你提到的帖子没有解决放在 .html 文件头部部分的行。 【参考方案1】：<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');
把你的字体放在这个样式文件所在的同一目录中
【讨论】：
万岁！有效！我做了什么：1）将 .woff 文件放在与 .css 文件相同的文件夹中 2）从 .html 文件中删除 行 3）复制粘贴 src: .... 行从您的评论而不是 src：....我以前有。谢谢大家！ 也适用于 otf。【参考方案2】：据我了解，您的local 源应该只显示您机器上安装的字体名称。 url 源应该指向字体文件相对于您的 CSS 文件位置的位置：
local('Reef'), url('/Path/To/My/Font/reef-webfont.woff')
【讨论】：
以上是关于如何链接到 html 文档中的 .woff 字体文件的主要内容，如果未能解决你的问题，请参考以下文章
解决Web部署 svg/woff/woff2字体 404错误