Css 字体系列默认为无衬线可选

以下是我的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替代字体，导入的字体就可以正常工作。但是，使用上面的代码，浏览器会自动默认为无衬线。我做过这件事，不管有没有！重要标签。事实上，如果我在“Istok Web”之后添加任何内容，它将切换到无衬线。

您使用的浏览器是什么？您是否在多个浏览器中进行了测试并一致地注意到了这个问题？有时浏览器可能会在字体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);

请务必检查您的文件路径。src是相对于容易出错的CSS文件路径的。根据您的代码，您的/font/与CSS文件位于同一目录中。对吗？ 添加formattruetype，如下例所示。您应该有不同的字体文件，以确保跨浏览器的兼容性。在线服务将免费进行这些转换。 如果所有其他操作都失败，请仔细检查服务器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;
}

---

你正在使用哪个浏览器。ttf文件不会总是在每个浏览器中都正确呈现。我在Safari、Firefox和Chrome中都尝试过，并且在所有浏览器中都是一样的。如果在“Istok Web”和无衬线之间添加不同的字体，它会选择该字体还是仍然无衬线？您是否有可以使用JSFIDLE或类似工具展示的工作示例？谢谢您的回答。我尝试了所有这些，但没有任何运气。你需要自己托管字体文件吗？如果没有，该字体也可以通过。可能值得尝试以这种方式添加它，看看您是否仍然存在问题。它以前通过Google字体工作，但我更愿意托管它。文件路径不是问题。。。如果我删除无衬线字体工程。只是当我包含它时，它会自动默认为它。因此，添加truetype格式没有任何作用。您有一个托管示例，我们可以看一下吗？您是否尝试过使用Chrome的DevTools或Firebug进行故障排除？