1

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

我正在测试并与此站点进行比较（主菜单）

这是我的小提琴

为什么我不能得到这份工作？另一个网站上的字体工作得很好。

这是我的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;
}

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

我究竟做错了什么？

4

3 回答 3

2

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

@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 开始，让一个工作，然后在完成后添加另一个（修补时要做的更改较少）。

于 2012-07-27T17:50:42.287 回答
0

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

于 2012-07-27T18:23:53.803 回答
0

我知道这听起来很疯狂，但我很难让@font-face 使用绝对路径。但是，我一直将它与相对路径一起使用，并且效果很好。我也推荐Font Squirrel。您需要做的就是调整相对于您的字体来自其提供的生成工具包和代码的位置的 CSS 路径。当然，对于 Worpress，始终使用子主题来规避默认字体声明。

于 2012-08-04T22:04:53.660 回答