Question

我无法让font-face工作（这就是我通常使用Google字体的原因）。但是客户必须使用自己的字体。

我正在测试并与 this site （主菜单）进行比较

这是 fiddle

为什么我无法完成这项工作？另一个网站上的字体工作正常。

这是我的CSS：

@font-face{
  font-family:'testFont';
  src:url('http://www.cphvision.dk/sites/all/themes/vision/webfonts/21B1BE_0_0.eot');
  src:url('http://www.cphvision.dk/sites/all/themes/vision/webfonts/21B1BE_0_0.ttf'), format('truetype');
}

ul li a {
font-family:'testFont', sans-serif;
  font-weight:normal;
}

我也在我的本地服务器上测试过。也不在那里工作。
我之前在谷歌下载的字体上测试过使用font-face。没有成功。

我做错了什么？

Answer 1

我之前也遇到过font-face的问题。我知道当我使用它时，我没有用引号（单引号或双引号）包围font-family属性。此外，由于某种原因，将font-face规则放在主样式表中似乎存在某种冲突，因此我将它们放在一个单独的样式表中并将其放在我的主样式表的顶部：

@import url('font.css');

以下是我的一个此规则实例的快速示例，直接从文件中复制：

@font-face{
  font-family: Kalinga;
  src:url(kalinga.ttf);
}

@font-face{
  font-family: Kalinga;
  font-weight: bold;
  src: url(kalingab.ttf);
}

我知道我没有在这里添加ttf和eot，但它是一个很好的例子供你参考。我建议从eot或ttf开始，让一个工作，然后在你完成时添加另一个（在修补时做的更少）。

Answer 2

我建议使用像Font Squirrel这样的服务。我这样说是因为你可以上传一个字体，它会自动将它转换为eot，ttf等，并为你提供一个zip文件，其中包含你的字体和一些示例文件，以帮助你入门。 / p>

Answer 3

我知道这听起来很疯狂，但我无法让@ font-face使用绝对路径。但是我一直使用它与相对路径，它工作正常。我还建议Font Squirrel。您需要做的就是调整CSS路径，使其相对于字体所提供的生成的工具包和代码的位置。当然，对于Worpress，总是使用子主题来规避默认的字体声明。

我无法让font-face工作

3 个答案: