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

Question

所以，我试图在我的网站上使用监督者，但它不会显示给没有在他们的电脑上安装该字体的任何人。 我使用@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

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

https://transfonter.org/

只需上传字体将其转换为使用 base64 的某种格式，您将收到一个 zip 文件，其中有一个带有字体的 css 复制带有完整字体元素的长文本（它真的很长）并查看魔法

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

Answer 3

我的网站也有同样的问题。 我所做的只是在我试图指向代表根的资源前面添加一个“/”，并且它起作用了。

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