尝试实现自定义字体时出现“@font-face 声明不遵循 fontspring 防弹语法”错误答案

【问题标题】："@font-face declaration doesn't follow the fontspring bulletproof syntax" error when trying to implement custom font尝试实现自定义字体时出现“@font-face 声明不遵循 fontspring 防弹语法”错误
【发布时间】：2022-01-23 22:59:48
【问题描述】：

我正在尝试向我的网站添加自定义字体，但无论我尝试什么，都会遇到相同的错误，而且我找不到太多关于如何修复它的信息。

这是我的代码：

@font-face {
  font-family: "Moderna";
  src: url("/MODERNA.TTF")
}

建议？

【问题讨论】：

您使用的不仅仅是普通的 HTML 和 CSS 吗？请张贴一个显示上下文的sn-p。尤其是阅读有关 fontspring 防弹的内容 - 这似乎需要两个 src 声明（至少，出于历史原因，它确实如此）。

标签： html css

【解决方案1】：

The fontspring bulletproof syntax 只是一个建议。它声明您的 @font-face 在大多数情况下必须满足以下语法才能正常工作：

    @font-face {
        font-family: 'MyFontFamily';
        src: url('myfont-webfont.eot?') format('eot'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg')
    }

现在大多数浏览器都支持 TTF 字体，但是如果您在浏览器中看不到字体，试试这个

    @font-face {
      font-family: "Moderna";
      src: url("/MODERNA.TTF") format("ttf");
    }

如果我没记错的话，那么规则必须在您的 css 文件之上。请检查文件/MODERNA.TTF是否存在。

【讨论】：

试过了，还是一样的错误。截图：imgur.com/a/2KEIs9d
@MOODSINTOSH 请在您的帖子中说明您在代码编辑器中遇到错误

【解决方案2】：

很确定您的路径/网址导致了这个问题：

  src: url("/MODERNA.TTF")

表示您正在输入一个名为“MODERNA.TTF”的目录，而不是一个文件。

正如@Mik 指出的那样，推荐的声明应该没问题——除非找不到您的文件。根据您的 html/css 文件结构，它应该是这样的：（假设您的字体文件与您的 css 位于同一目录中。

@font-face {
        font-family: 'Moderna';
        src: url('MODERNA.eot?') format('eot'), 
         url('MODERNA.woff') format('woff2'),
         url('MODERNA.woff') format('woff'), 
         url('MODERNA.ttf')  format('truetype'),
         url('MODERNA.svg#svgFontName') format('svg')
    }

还要记住，通过@font-face 引用字体文件是区分大小写的（可能有例外）。
因此，请仔细检查您的确切字体文件名是否真的使用大写字母（MODERNA.TTF 或moderna.ttf）。

【讨论】：