Question

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

我得到了什么：

8个文件：

4 x normal eot，svg，ttf，woff

4 x bold 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错误文件。它显示了错误控制台右侧的CORRECT URL。

Answer 1

我几乎痴迷地使用这个工具。为我节省了解决这个问题的时间。

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

有史以来最好的工具。

Answer 2

两个主要问题：

您正在引用12个不同的文件，但您只有8个（Alef.eot，等等。; Alef-regular.eot等; Alef-bold.eot等。）
我认为你的2'src'声明每个声明都搞砸了。应该只有一个用逗号分隔的网址。

以下是我要做的事情：

删除style.css中的font-face声明。将fonts-face声明移出stylesheet.css并移入style.css。
只使用一个'src'声明，所有网址都以逗号分隔。

以下是我将使用的代码:(您的文件路径已替换）：

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

无法绕过访问服务器上的字体（在控制台中获取404错误）

2 个答案: