0

所以我下载了一种名为“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。

4

2 回答 2

1

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

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

有史以来最好的工具。

于 2013-03-26T19:48:19.110 回答
0

两个主要问题：

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

这是我要做的：

  • 删除 style.css 中的 font-face 声明。将 font-face 声明移出 stylesheet.css 并移入 style.css。
  • 只使用一个所有 url 用逗号分隔的 '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;
}
于 2013-03-26T18:56:05.757 回答