Question

这是我的CSS代码：

@font-face {
    font-family: 'Istok Web';
    src: url(fonts/fonts_istok-web/IstokWeb-Regular.ttf);
}

 body {
      font-family: 'Istok Web', sans-serif !important;
      line-height: 1.8;
      color: #000;
      background-color:#fff;
  }

如果删除sans-serif替代方法，导入的字体可以正常工作。但是，使用上面的代码，浏览器会自动默认为sans-serif。我已经使用和没有！important标签完成了这项工作。事实上，如果我在'Istok Web'之后添加任何内容，它会切换到sans-serif。

Answer 1

请务必检查文件路径。 src相对于CSS文件的路径很容易出错。根据您的代码，您在{CSS}文件所在的目录中有/fonts/。这是对的吗？
像以下示例一样添加format("truetype")。您应该拥有不同的字体文件以确保跨浏览器兼容性。有在线服务可以免费进行这些转换。
如果所有其他方法都失败，请仔细检查您的服务器MIME类型，以确保允许使用字体扩展名。

这是我多次使用的格式，它似乎总能正常工作。

@font-face {
    font-family: "Archer-Medium";
    src: url("../fonts/archer-medium-pro.eot?#iefix") format("embedded-opentype"), 
         url("../fonts/archer-medium-pro.svg#ArcherMedium") format("svg"), 
         url("../fonts/archer-medium-pro.woff") format("woff"), 
         url("../fonts/archer-medium-pro.ttf") format("truetype");
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Archer-Medium",Georgia,sans-serif;
}

Answer 2

您使用的浏览器是什么？您是否已在多个浏览器中进行过测试并始终注意到此问有时，浏览器可能会出现字体网址中大写或间距的问题。

另外，在@ font-face中定义font-family时不需要引号。这可能会导致结果好坏参半。请尝试使用此CSS：

@font-face {
    font-family: IstokWeb;
    src: url(fonts/fonts_istok-web/IstokWeb-Regular.ttf);
}
body {
    font-family: IstokWeb, Helvetica, Arial, sans-serif ;
    line-height: 1.8;
    color: #000;
    background-color:#fff;
}

如果这不起作用，我建议将文件夹和ttf文件重命名为小写并使用此CSS：

src: url(fonts/fonts_istok-web/istokweb-regular.ttf);

字体系列默认为sans-serif替代品

2 个答案: