Question

所以，我正在尝试在我的网站上使用Overseer，但它不会出现在没有在他们的电脑上安装该字体的任何人。我使用@font face和该字体的5个不同版本（otf，eot，woff，ttf和svg），它仍然无法加载。我能解决这个问题吗？这是@ font-face css。

@font-face {
font-family: Overseer;
src: url(fonts/overseer.eot);
src: url(fonts/overseer.eot) format('embedded-opentype'), url(fonts/overseer.woff) format('woff'), url(fonts/overseer.ttf) format('truetype'), url(fonts/overseer.svg) format('svg');
font-weight: 400;
font-style: normal;}

Answer 1

试试这个！一些可能有帮助的小改动。

@font-face {
    font-family: 'Overseer';
    src: url(fonts/overseer.eot);
    src: url(fonts/overseer.eot?#iefix) format('embedded-opentype'),      
        url(fonts/overseer.woff) format('woff'),
        url(fonts/overseer.ttf) format('truetype'),
        url(fonts/overseer.svg#Overseer) format('svg');
    font-weight: 400;
    font-style: normal;
}

它对我有用。使字体工作有时可能很困难。如果有效，请接受它。

Answer 2

我的网站也遇到了同样的问题。我所做的就是在我要指向的资源的前面添加一个“ /”以表示根，并且可以正常工作。

@font-face {
    src: url(/assets/fonts/roboto/Roboto-Regular.ttf;
    font-family: Roboto;
}

Answer 3

这是我一直以来最好的解决方案

https://transfonter.org/

只需将上载字体将其转换为base64格式，您将收到一个zip文件，其中包含一个带字体的css，它会复制带有完整font-face元素的长文本（它真的很长），然后看一下魔术< / p>

不需要任何可在任何地方使用的字体扩展文件

自定义字体未显示在网站上

3 个答案: