Question

我有这个组织方案：

foo/index.html
stylesheets/normal.css
stylesheets/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版。

Answer 1

相对URL可能很棘手，但从没有斜杠开始与./相同，这意味着从当前目录开始。从两个点和斜杠（../）开始向上移动一个目录到父目录。从斜杠开始（/）转到root。

我认为您专注于样式表，但您应该查看样式表中字体的URL。您的字体引用当前目录，没有斜杠：

url("fonts/example.woff")

为了避免任何怪异，即使样式表本身被相对引用访问，在样式表中创建资产引用也是一个好主意。

Answer 2

如果您指的是本地存储的字体并在本地服务器（例如localhsot）内工作，则需要将所选字体放入服务器，或者您需要在服务器上工作，例如使用localhost。

为了使代码更可靠，请包含字体文件类型的指示符。您可以对Internet Explorer使用 EOT（嵌入式OpenType）文件，其余部分使用 OTF（OpenType）或 TTF（TrueType）。（其他选项包括 WOFF（Web开放字体格式）和 SVG（可缩放矢量图形）。我使用另一种可选效率测量，我使用 src: local('fontname') 让浏览器检查字体的本地副本，以防用户已经拥有它。此外，您可以包含字体变量font-weight。

如果您尝试继续工作您的桌面例如它无法正常工作或没有任何反应，因此您需要使用<style>@import url('https://fonts.googleapis.com/css?family=Arvo');</style>。

富/ 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。请尝试将以下代码放入您的服务器中。然后再次尝试将其放在服务器外部并查看其中的差异。

关联Google字体。

 <!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>

本地存储的字体未被渲染

2 个答案: