Question

该字体在我的网站上运行，但随后停止了除主页之外的所有工作（使用Chrome）。我在Firefox中检查了它，字体根本不起作用。我使用Font Squirrel Web字体生成器将字体上传到我的根文件夹。

字体

@font-face {
font-family: 'antonioregular';
src: url('antonio-regular-webfont.eot');
src: url('antonio-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('antonio-regular-webfont.woff') format('woff'),
     url('antonio-regular-webfont.ttf') format('truetype'),
     url('antonio-regular-webfont.svg#antonioregular') format('svg');
font-weight: normal;
font-style: normal;
}

HTML

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

标题

h6 {
font-family: 'antonioregular', 'Spinnaker', sans-serif;
font-weight: 400;
line-height: 1.2;
margin: 0 0 16px;
}

Answer 1

您正在加载字体的文件必须位于同一目录中，因为您没有与该字体关联的任何路径，只有该文件。既然你说你把它上传到root，这就解释了为什么只有主页才能获得它。

提供文件的相对或绝对路径，它应该随处可用。

Answer 2

这些网址实际指向您的字体吗？如果您在http://example.com/foo/bar，则会在foo文件夹中查找字体。如果字体在根目录中，则会失败。也许您打算在URL中包含路径信息，在您的情况下最有可能src: url('/antonio-regular-webfont.eot');。

注意：您应该能够使用浏览器的开发人员工具查看正在发出的请求，并且可能会返回404。这应该唤起'＃34;这不是正确的位置，发生了什么？＆＃34;响应。

@ font-face字体停止了除主页之外的所有工作

2 个答案: