为什么我最近下载的字体不起作用?

时间:2019-10-04 23:22:03

标签: css fonts font-face font-family

我刚刚安装了一种名为Skyfont的新文本字体。无法使其正常工作,我一直在用@font-face声明它,并且html中没有任何元素可以阻止它。这是CSS代码:

h1 {
    text-align: center;
    font-family: 'Skyfont Regular';
    color: #000000;
    font-size: 26pt;
    font-weight: bold;
    margin-top: 26px;
    right: 50%;
    text-decoration: none;
}

@font-face {
    font-family: 'Skyfont Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Skyfont Regular'), url(fonts/Skyfont-NonCommercial.otf) format('otf');
}

感谢我可以获得的所有帮助:)我

如果我没有写任何遗漏,请告诉我。

2 个答案:

答案 0 :(得分:1)

一些合理的解释:

  • 您忘记了src属性中网址路径周围的引号
  • 您定位的路径错误。查看浏览器的开发者控制台,以检查您是否成功请求了字体文件。您可以通过在Chrome中按Control + Shift + J(在Mac上为Command + Option + J)或Control + Shift + K(在Mac上为Command + Option + K)来打开它。转到network窗口并重新加载页面。尝试找到字体文件的名称(根据您的css,它应该是Skyfont-NonCommercial.otf)。您应该在其旁边看到200状态,这意味着您的浏览器已成功获取文件。如果没有,则意味着在给定地址上找不到您的文件(有关其他HTTP状态代码,请参见here)。
  • 您的.otf文件已损坏或文件扩展名错误

我希望这会有所帮助。

答案 1 :(得分:0)

在Windows 10中本地安装的字体存在奇怪的浏览器行为。
如果将字体文件拖到C:\ Windows \ Fonts,则Windows会将它们安装到用户配置文件中
C:\ Users \ YourName \ AppData \ Local \ Microsoft \ Windows \ Fonts。
Chrome不会在@ font-face标记中看到该字体,因此local('Skyfont Regular')将永远无法工作。
这可能是该错误的意外结果,该错误最近已修复@font-face src: local() should take font face name, not family name
解决方法是将字体安装到C:\ Windows \ Fonts中,可以通过右键单击字体文件并选择“为所有用户安装字体”来实现。