css @font-face不起作用

Question

我需要用thte @ 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/或web上的其他字体生成器服务来获取所有需要的字体格式。

Answer 2

删除'‘后重试

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

Answer 3

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