无法访问服务器上的字体（在控制台中出现 404 错误）答案

【问题标题】：Can't wrap my head around accessing fonts on server (getting 404 errors in console)无法访问服务器上的字体（在控制台中出现 404 错误）
【发布时间】：2013-03-16 16:25:13
【问题描述】：

所以我下载了一种名为“Alef”的新字体。它是希伯来语的，但这无关紧要，因为我无法激活它。我很确定我在做一些非常愚蠢的事情，但我已经尝试了几个小时来应用它但没有成功。

我得到了什么：

8 个文件：

4 x 正常 eot、svg、ttf、woff

4 x 粗体 eot、svg、ttf、woff

还有一个名为 stylesheet.css 的样式表文件，现在包含以下代码：

@font-face {
font-family: 'Alef';
src: url("/wp-content/themes/duet/Alef-bold.eot");
src: url("/wp-content/themes/duet/Alef-bold.eot?#iefix") format('embedded-opentype'),
     url("/wp-content/themes/duet/Alef-bold.woff") format('woff'),
     url("/wp-content/themes/duet/Alef-bold.ttf") format('truetype'),
     url("/wp-content/themes/duet/Alef-bold.svg#alefbold") format('svg');
font-weight: bold;
font-style: normal;

}
@font-face {
font-family: 'Alef';
src: url("/wp-content/themes/duet/Alef-regular.eot");
src: url("/wp-content/themes/duet/Alef-regular.eot?#iefix") format('embedded-opentype'),
     url("/wp-content/themes/duet/Alef-regular.woff") format('woff'),
     url("/wp-content/themes/duet/Alef-regular.ttf") format('truetype'),
     url("/wp-content/themes/duet/Alef-regular.svg#alefregular") format('svg');
    font-weight: normal;
    font-style: normal;

我已将所有文件上传到我的主题目录：/wp-content/themes/duet/

我的主 CSS 文件名为 style.css，它也在同一个目录下，我在文件中添加了这段代码：

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

然后我所做的就是将这一行添加到我的 header.php 中：

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

当然我设置了我的 p {font-family: Alef;)

我做错了什么？ Chrome 控制台中的文件出现 404 错误。但它会在错误控制台的右侧显示正确的 URL。

【问题讨论】：

您是否尝试过使用相对路径？
这可能是因为您声明了两次并且 main.css 是最新的。在 main.css 中，您也没有任何文件路径
在哪里申报两次？你能建议最好的安装方法吗？老实说，我认为我尝试了所有技巧。 Chrome 告诉我有一个 404 但显示正确的路径。我完全迷路了。
我读它就像你同时拥有两个样式表一样。这是本地的还是生产的？您可能需要为生产添加 mime 类型

标签： css wordpress fonts webfonts

【解决方案1】：

我几乎痴迷地使用这个工具。节省了我解决像这样的错误的时间。

http://www.fontsquirrel.com/tools/webfont-generator

有史以来最好的工具。

【讨论】：

【解决方案2】：

两个主要问题：

您引用了 12 个不同的文件，但只有 8 个（Alef.eot，等等。; Alef-regular.eot等； Alef-bold.eot 等）
我认为每个声明的 2 条“src”语句都搞砸了。只能是 url 用逗号分隔的一个。

我会这样做：

删除 style.css 中的 font-face 声明。将 font-face 声明移出 stylesheet.css 并移入 style.css。
仅使用一个“src”声明，所有 url 用逗号分隔。

这是我将使用的代码：（您的文件路径已替换）：

`@font-face {
    font-family: 'Alef';
    src: url('/wp-content/themes/duet/Alef-regular.eot?#iefix') format('embedded-opentype'),
    url('/wp-content/themes/duet/Alef-regular.woff') format('woff'),
    url('/wp-content/themes/duet/Alef-regular.ttf') format('truetype'),
    url('/wp-content/themes/duet/Alef-regular.svg#Alef') format('svg');
    font-weight: normal;
    font-style: normal;
}

补充：当然，这里是粗体版……

`@font-face {
    font-family: 'Alef';
    src: url('/wp-content/themes/duet/Alef-bold.eot?#iefix') format('embedded-opentype'),
    url('/wp-content/themes/duet/Alef-bold.woff') format('woff'),
    url('/wp-content/themes/duet/Alef-bold.ttf') format('truetype'),
    url('/wp-content/themes/duet/Alef-bold.svg#Alef') format('svg');
    font-weight: bold;
    font-style: normal;
}

【讨论】：