Bulletproof @Font-Face 语法-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

Bulletproof @Font-Face 语法

P粉566048790 2023-09-05 18:47:35

[CSS3讨论组]

834

我尝试通过 FTP 安装字体，但出现 Bulletproof 字体语法错误的错误。请问我做错了什么？ 编辑：我正在尝试在 Jared 的帮助下修复代码，但现在仍在工作 <pre class="brush:css;toolbar:false;">@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'); }</pre> 我想要的：安装没有错误的字体，并显示在 Elementor Editor 中

P粉566048790

全部回复(1)

P粉6271364502023-09-06 17:29:18 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