Css Can'；不要在服务器上访问字体（控制台中出现404错误）

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

我得到的是：

8个文件：

4倍正常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系列：Alef；）

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

两个主要问题：

• 您正在引用12个不同的文件，但只有8个（Alef.eot， 等；Alef-regular.eot等；Alef-bold.eot等）
• 我认为你的每个声明都有两个'src'语句，这会把事情搞砸。应该只有一个url用逗号隔开

下面是我要做的：

• 删除style.css中的字体面声明。将字体面声明从stylesheet.css移到style.css中
• 仅使用一个“src”声明，所有url用逗号分隔

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

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

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

---

我几乎痴迷地使用这个工具，省去了我解决类似于这个的bug的时间

---

有史以来最好的工具。

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

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