True Type字体（ttf）在css中不起作用

Question

我现在正在尝试使用我的 google font api 并将其本地化，但我遇到了问题。我目前正在使用这个

@import url('https://fonts.googleapis.com/css?family=Open+Sans')

我一直在研究并发现我可以将“Font-face”与下载的“.ttf”文件一起使用。所以我尝试使用 ttf 文件，但它根本不起作用。我尝试将其转换为“woff”，但仍然没有运气。这是我的代码

@font-face {
    font-family: opensans;
    src: url(../fonts/OpenSans_Regular/OpenSans-Regular.ttf) format("truetype");
}

#ok{

    font-family: opensans;
}

Answer 1

您的路径可能有误，请记住它是来自 .css 文件的路径。

尝试查看导航器的控制台是否有错误。

此外，您可能需要精确回退字体并将您的字体系列名称放入括号中，像这样

font-family: "opensans", sans-serif;

此外，您需要包含多种字体格式以确保浏览器兼容性。更多信息在这里@font-face

根据您的项目要求，您可以使用 Google Fonts 提供的选项，并将其包含在您的 CSS 中

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

#ok {
    font-family: 'Open Sans', sans-serif;
 }