我有这个组织方案:
foo/index.htmlstylesheets/normal.cssstylesheets/fonts/example.woff
foo/index.html 包含:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../stylesheets/normal.css" />
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
stylesheets/normal.css 包含:
@font-face
{
font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
font-family: "Example";
src: url("fonts/example.woff");
}
p
{
color: blue;
font-family: "Example";
}
当我在这些文件本地机器(不是网络服务器)的浏览器中加载 foo/index.html 时，该段落不会与 stylesheets/fonts/example 一起显示.woff字体；但它确实显示为蓝色。
如果我将 foo/index.html 移动到 index.html (因此它不在目录中)并将样式表路径从 ../stylesheets/normal.css 到 stylesheets/normal.css，然后段落会正确显示字体。
为什么会这样？我使用的是 Firefox 版本 52.0.2。
最佳答案
如果您指的是本地存储的字体并在本地服务器(例如 localhsot)中工作，则需要将所选字体放入您的服务器，或者您需要在您的服务器上工作，例如使用本地主机。
为了使代码更可靠，包括字体文件类型的指示符。您可以为 Internet Explorer 使用 EOT(嵌入式 OpenType) 文件，为其余文件使用 OTF (OpenType) 或 TTF (TrueType)。 (其他选项包括WOFF(Web 开放字体格式) 和SVG(可缩放矢量图形)。我使用另一个可选的效率度量，我使用 src: local('fontname') strong> 让浏览器检查字体的本地副本，以防用户已经拥有它。此外，您可以包括字体变体 font-weight。
如果您尝试在桌面上工作例如，它不起作用或什么也没有发生，因此您需要使用 <style>@import url('https://fonts.googleapis.com/css?family=Arvo');</style> 作为例子。
foo/index.html
<!DOCTYPE html>
<html>
<head>
<title>STACKOVERFLOW | QUESTION 43509510</title>
<link rel="stylesheet" type="text/css" href="../stylesheets/normal.css">
</head>
<body style="font-family: 'AceFont';">
<h1 class="firsth1">This is my sample header</h1>
<p class="firstparagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
样式表/normal.css
/*The locally imported font*/
@font-face {
font-family: 'AceFont';
src: url('fonts/AriosoNormal.eot');
src: local('AceFont'), url('fonts/AriosoNormal.woff') format('woff'), url('fonts/AriosoNormal.ttf') format('truetype');
}
/*End of the locally imported font*/
/*Content Sample*/
h1{
font-family: 'AceFont';
}
.firstparagraph{
font-family: 'AceFont' !important;
}
在此处下载完整文件 https://www.dropbox.com/s/k30nr5z6yywzg9z/localfont.rar?dl=0 .请尝试将以下代码放入您的服务器。并再次尝试放在服务器外部并查看差异。
链接谷歌字体。
<!DOCTYPE html>
<html>
<head>
<title>STACKOVERFLOW | QUESTION 43509510</title>
</head>
<body style="font-family: 'Arvo', serif;">
<h1 >This is my sample header</h1>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Arvo');
</style>
关于html - 未呈现本地存储的字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43509510/