css @ font-face不起作用

时间:2014-07-11 10:40:42

标签: css font-face font-family

我需要使用@ font-face在我的网页中设置一个字体系列,但我无法使其工作:这是我的css文件的内容

@font-face {
    font-family: knockout;
    src: url('../fonts/knockoutHTF27.ttf');
}

body {
    font-width: normal;
    font-size: 20px;
    font-family: knockout !important;
    color: #223041;
    text-align: center;
}

我已经在两台不同的计算机上尝试过相同的代码,它在其中一台计算机上运行得很好,但在另一台计算机上却不起作用。可能有什么不对?

3 个答案:

答案 0 :(得分:1)

您应尝试使用所有引号进行完全嵌入。它可以清除不同浏览器/操作系统上可能出现的故障。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

然后,像这样使用它:

body {
    font-family: 'MyWebFont', Fallback, sans-serif;
}

如前所述,如果需要,您可以在网络上使用http://www.fontsquirrel.com/或其他一种字体生成器服务,以获取所有需要的字体格式。

答案 1 :(得分:0)

删除''

后尝试
src: url(../fonts/knockoutHTF27.ttf);

答案 2 :(得分:0)

您必须为不同的浏览者使用其他字体文件格式,而不仅仅是.ttf.woff, .eot。并检查你的路径