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