如何链接到 html 文档中的 .woff 字体文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34933350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to link to a .woff font file in html document
提问by Hiroshima
I have a problem with a font I installed on my computer that I want to apply to HTML5 / CSS3.
我在计算机上安装的字体有问题，我想将其应用于 HTML5/CSS3。
How my question differs from its possible duplicate: it explicitely asks what to put in the .html file, a question that was unaddressed in the duplicate question.
我的问题与其可能的重复问题有何不同：它明确询问要在 .html 文件中放入什么内容，这个问题在重复问题中没有得到解决。
Update after problem solved:
问题解决后更新：
1) The <link href=....>line must NOT be included in the .html file
1) 该<link href=....>行不得包含在 .html 文件中
2) The .woff font file must be in the same directory as the .css file.
2) .woff 字体文件必须和.css 文件在同一个目录下。
This is my minimal working 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;
}
And this is my minimal working HTML file:
这是我最小的工作 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>
Whatever I do, my page appears with its backup font, monospace, not Reef.
无论我做什么，我的页面都会显示其备用字体，等宽字体，而不是 Reef。
My question is: how do I correctly reference the font source in the html? As far as I can tell from searching answers, my css is supposed to be right.
我的问题是：如何正确引用 html 中的字体源？据我从搜索答案中得知，我的 css 应该是正确的。
I'm using Firefox on Windows 10.
我在 Windows 10 上使用 Firefox。
回答by Head In Cloud
<link href='../Fonts/Reef/reef-webfont.woff' rel='stylesheet' type='text/css'>
you cannot reference a font like this.
<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');}
put your fonts in the same directory where this style file is located
将您的字体放在此样式文件所在的同一目录中
回答by Jamie Barker
From my understanding, your localsource should just display the name of the font as it's installed on your machine. The urlsource should point to where the font file is in relation to your CSS file location:
根据我的理解，您的local源代码应该只显示安装在您机器上的字体名称。该url源应该指向字体文件是关于你的CSS文件的位置：
local('Reef'), url('/Path/To/My/Font/reef-webfont.woff')
local('Reef'), url('/Path/To/My/Font/reef-webfont.woff')
