Question

我需要使用@ 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;
}

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

Answer 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/或其他一种字体生成器服务，以获取所有需要的字体格式。

Answer 2

删除''

后尝试

src: url(../fonts/knockoutHTF27.ttf);

Answer 3

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

css @ font-face不起作用

3 个答案: