字体系列默认为无衬线替代

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 替代品，导入的字体可以正常工作。但是，使用上面的代码，浏览器会自动默认为无衬线字体。我在有和没有 !important 标签的情况下都做到了这一点。事实上，如果我在“Istok Web”之后添加任何内容，它会切换为无衬线字体。

Answer 1

1. 请务必检查您的文件路径。 src 是相对于 CSS 文件的路径，容易出错。根据您的代码，/fonts/ 与您的 CSS 文件位于同一目录中。对吗？
2. 添加format("truetype")，如下例所示。你真的应该有不同的字体文件来确保跨浏览器的兼容性。有在线服务可以免费进行这些转换。
3. 如果一切都失败了，请仔细检查您的服务器 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

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

另外，在@font-face 中定义字体系列时不需要引号。这可能导致好坏参半的结果。试试这个 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);