Question

我刚刚安装了一种名为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');
}

感谢我可以获得的所有帮助：）我

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

Answer 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文件已损坏或文件扩展名错误

我希望这会有所帮助。

Answer 2

在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中，可以通过右键单击字体文件并选择“为所有用户安装字体”来实现。

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

2 个答案: