Question

我的计算机上安装的字体出现问题，我想将其应用于HTML5 / CSS3。

我的问题与其可能的重复有何不同：它明确地询问了什么放在.html文件中，这个问题在重复的问题中没有得到解决。

问题解决后更新：

1）{。1}行不得包含在.html文件中

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

这是我最小的工作CSS：

<link href=....>

这是我最小的HTML文件：

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

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

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

我在Windows 10上使用Firefox。

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

将您的字体放在此样式文件所在的同一目录中

Answer 2

据我了解，您的local来源应该只显示机器上安装的字体名称。 url来源应指向字体文件相对于 CSS文件位置的位置：

local('Reef'), url('/Path/To/My/Font/reef-webfont.woff')

如何链接到html文档中的.woff字体文件

2 个答案: