Bulletproof @Font-Face 语法

Question

我尝试通过 FTP 安装字体，但出现 Bulletproof 字体语法错误的错误。请问我做错了什么？

编辑：我正在尝试在 Jared 的帮助下修复代码，但现在仍在工作

@font-face {
font-family: 'Brasilero2018Free';
src: 
    local("Brasilero2018Free"),
    url('https://www.flordeibez.org/wp-content/themes/fonts/Brasilero2018Free.otf'),
    url('https://www.flordeibez.org/wp-content/themes/fonts/Brasilero2018Free.eot') format('embedded-opentype'),
    url('https://www.flordeibez.org/wp-content/themes/fonts/Brasilero2018Free.woff') format('woff'),
    url('https://www.flordeibez.org/wp-content/themes/fonts/Brasilero2018Free.svg') format('svg'),
    url('https://www.flordeibez.org/wp-content/themes/fonts/Brasilero2018Free.ttf') format('truetype'); 
}

我想要的：安装没有错误的字体，并显示在 Elementor Editor 中

Answer 1

您的语法为：

src: url('some_url');
src: url('other_url');

您只需在每一行中重新定义字体的 URL。所以浏览器只会使用最后一个，其他的都会被丢弃。正确的基本语法是：

@font-face {
  font-family: 'SomeFont';
  src: 
    local("SomeFont"),
    url('//host.tld/SomeFont.woff2') format('woff2'), 
    url('//host.tld/SomeFont.woff') format('woff'), 
    url('//host.tld/SomeFont.ttf') format('truetype');
}

如果您需要满足旧浏览器的要求，您可以包含额外的字体格式。

注意：将错误的 format('ttf') 更改为 format('truetype')，感谢 @herrstrietzel