@font-face 接受的字体是否有一些限制？答案

【问题标题】：Is there some restriction to what fonts @font-face, will accept?@font-face 接受的字体是否有一些限制？
【发布时间】：2020-03-04 15:49:39
【问题描述】：

我一直在尝试使用 css 和自定义字体，但在完全相同的情况下遇到了问题；我可以让其他字体正常工作，但不是我想要使用的字体。我是否需要包含一些我不知道的异常处理？

这会起作用

@font-face{
    src: url("VeganStylePersonalUse-5Y58.ttf");
    font-family: "custom";
}
.h1{  
    font-family: "custom"  
}

但这不会

@font-face{  
    src: url("runescape_uf.ttf");  
    font-family: "custom";  
}  
.h1{  
    font-family: "custom"  
}

它们都与 html 和 css 位于同一文件夹中，可以在
https://www.fontspace.com/billy-argel/vegan-style-personal-use
找到 &
https://fontmeme.com/fonts/runescape-uf-font/

【问题讨论】：

你检查过你的src URL目录路径是否正确吗？
是的，我检查了三次，甚至尝试了 windows/fonts 路径，但这似乎根本不起作用
@S Benfield 在末尾添加format("ttf") 例如：src: url("runescape_uf.ttf") format("ttf");
这不起作用，它使其他字体起作用，而不起作用。
@S Banfield @font-face { font-family: 'Vegan Style Personal Use Regular'; font-style: normal; font-weight: normal; src: local('Vegan Style Personal Use Regular'), url('Vegan Style Personal Use.woff') format('woff'); }

标签： css fonts

【解决方案1】：

无论出于何种原因，这种特殊字体只能通过将 truetype 文件转换为 woff 文件然后更改代码以适应浏览器的方式在浏览器中工作。即。

@font-face {
    font-family: 'rs';
    src:url('Runescape.woff') format('woff');
}

我仍然不确定为什么一种字体被支持为 ttf 字体，而另一种字体需要是 woff 文件。

【讨论】：

可能是许可。我认为某些字体被禁止使用网络。转换为 woff 可能会删除该块，但您仍应检查许可证是否允许您在网络上使用它。否则，truetype 是一种复杂的格式，并且某些字体不完全符合标准。可能是浏览器无法正确解释字体文件。

【解决方案2】：

您可以给出字体系列中的任何字符串，但不要使用空格。仅使用 src URL 来定位字体系列。

@font-face {
font-family: 'vegan-style-personal-use-regular';
font-style: normal;
font-weight: normal;
src: url('VeganStylePersonalUse-5Y58.ttf') format('ttf');
}

<h3 style="font-family: 'vegan-style-personal-use-regular'">Eos qui sapiente doloribus dolorem rerum.</h3>

根据您的目录路径更改 src url。

【讨论】：

没关系，我明白了你所说的工作，但我又回到了第一格。也就是说，当我将此字体换成其他自定义字体时，它不起作用。
我不认为你明白我在说什么。即使使用我最初使用的少量代码，我也可以让 Vegan Style Personal Use 字体正常工作。但是我不能使用 runescape_uf 字体，即使它在同一个目录中的格式相同，而且我只是在 src 编辑中切换了名称：即使我使用你的代码，我仍然只能让 Vegan 风格的字体工作
@S.Banfield 我编辑了我的答案，你检查了吗？这段代码工作正常而不是空间使用-
这不会有问题，因为您只需设置文件引用该字体的名称。就像一个变量，你可以将它设置为任何字符串，然后在告诉 h3 它是什么字体系列时，只需使用相同的变量。