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

Posted 2023-03-15

【中文标题】True Type字体（ttf）在css中不起作用

【英文标题】：True Type Fonts(ttf) not working in css

【发布时间】：2018-11-11 18:47:53

【问题描述】：

我现在正在尝试使用我的 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;

【问题讨论】：

您检查相对于 css 文件的路径是否正确？

是的，我做到了。我使用“../”将其从 css 文件中推出并重新打开目录

devtools 应该显示是否正在获取字体。这说明了什么？

我检查了 devtools，在“Source”中我没有看到字体文件夹，所以我在 css 目录中添加了“ttf”文件，但它仍然没有工作

【参考方案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;
 

【讨论】：

路径是正确的，我把它从css文件里拿出来，用“../”从第一个目录开始。而且我想让它成为本地而不使用google api，因为这将在本地而不是在线显示