2012-07-27 82 views
1

我无法获得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从谷歌下载的字体。没有成功。

我在做什么错?

回答

2

我以前也遇到过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开始,然后开始工作,然后在完成时添加另一个(修改时做的更改较少)。

+0

嗯......测试@ nick-beranek的字体松鼠,我下载了一个软件包。打开文本html,字体工作。但是,当我把它放入我的WP解决方案时,它不起作用:(我尝试删除我的字体并只是有这些新的,但它并没有帮助...... – Steven 2012-07-27 22:22:13

+0

这并没有解决我的问题,但无论如何接受答案。 – Steven 2012-07-27 23:14:35

0

我将建议使用Font Squirrel这样的服务。我这样说是因为你可以上传一个字体,它会自动将它转换为eotttf等,并为你提供一个包含你的字体和一些示例文件的zip文件来帮助你开始。

0

我知道这听起来很疯狂,但我得到@ font-face使用绝对路径时遇到了麻烦。不过,我始终用相对路径来使用它,并且工作正常。我也推荐Font Squirrel。所有你需要做的就是调整相对于他们提供的生成工具包和代码中的字体的CSS路径。当然,对于Worpress,总是使用儿童主题来规避默认的字体声明。