如何修复“可下载字体：被消毒剂拒绝”的问题

Question

我想在我的网页中使用字体，但在加载页面时，在Firefox中出现以下错误消息：

downloadable font: rejected by sanitizer (font-family: "Yekan" style:normal weight:normal stretch:normal src index:1) source: .../css/Yekan.woff2  custom.css:1:12
downloadable font: incorrect file size in WOFF header (font-family: "Yekan" style:normal weight:normal stretch:normal src index:2) source: .../css/Yekan.woff  custom.css:1:12
downloadable font: rejected by sanitizer (font-family: "Yekan" style:normal weight:normal stretch:normal src index:2) source: .../css/Yekan.woff  custom.css:1:12
downloadable font: FFTM: invalid table offset (font-family: "Yekan" style:normal weight:normal stretch:normal src index:3) source: .../css/Yekan.ttf  custom.css:1:12
downloadable font: rejected by sanitizer (font-family: "Yekan" style:normal weight:normal stretch:normal src index:3) source: .../css/Yekan.ttf  custom.css:1:12
downloadable font: CFF : table overruns end of file (font-family: "Yekan" style:normal weight:normal stretch:normal src index:4) source: .../css/Yekan.otf  custom.css:1:12
downloadable font: rejected by sanitizer (font-family: "Yekan" style:normal weight:normal stretch:normal src index:4) source: .../css/Yekan.otf

我的自定义.css文件：

@font-face {
    font-family: 'Yekan';
    src: url('./Yekan.eot');
    src: url('./Yekan.eot?#iefix') format("embedded-opentype"),
    url('./Yekan.woff2') format('woff2'),
    url('./Yekan.woff') format('woff'),
    url('./Yekan.ttf') format('truetype'),
    url('./Yekan.otf') format('opentype'),
    url('.//Yekan.svg#Yekan') format('svg');
    font-weight: normal;
    font-style: normal;
}

我的 style.css 文件（我在其中使用字体）：

body
{
   font-family: "Yekan";
}

• 我搜索了很多，但找不到解决办法。
• 我之前用过这个字体，没有问题。
• 我检查了字体类型，是正确的（例如Yekan.ttf的字体类型为application/x-font-ttf）。

- Mohammad

---

字体是否无效或损坏？ - Álvaro González

我怎么能检查呢？我已经阅读了那个页面并使用了生成器，结果是相同的，而且在 about:config 中也没有名为 gfx.downloadable_fonts.sanitize 的选项。正如我所说，我以前使用过这种字体，我不认为字体文件是问题所在。 - Mohammad

那是一个旧的论坛帖子，他们肯定已经改变了Firefox中大部分基础代码。但是在像OpenOffice这样的软件中，存在错误的字体以前曾经给我带来过问题。也许你可以找到一个在线字体验证器来确保。 - Álvaro González

错误非常明显：字体的头部数据大小和实际文件大小是不同的值，这意味着它被错误地转换为woff2。重新下载字体（或者如果您构建了它，请重新构建）。此外，现在已经是2019年了：为什么你还要加载多年前就已经不存在的字体格式，而且为什么你还要加载ttf/otf？使用woff2，并提供woff作为回退选项。这样可以覆盖所有仍然支持的浏览器，包括Internet Explorer。 - Mike 'Pomax' Kamermans

我加载了所有格式来测试它们是否正常工作，但我确定字体没有问题，因为我已经多次将其上传到服务器，并且这种字体被数百个站点使用而没有任何问题。字体的 GitHub 页面：https://github.com/ParsMizban/Yekan-Font - Mohammad

Answer 1

我已找到问题所在，我使用Filezilla将字体上传到服务器时设置为ASCII传输模式，更改为二进制并重新上传字体后问题得到解决。

- Mohammad

Answer 2

我最近在服务器上使用 npm 包 bootstrap-icons 版本 1.5.0 的图标字体出现了问题。我在 SCSS 中使用图标类并将它们包装在自己的类名中。

对我来说，解决方法是重新定义 bootstrap 字体系列并将字体文件复制并重命名为项目所需。因此，在 styles.scss 中看起来像这样：

@font-face {
  font-family: "bootstrap-icons-redef";
  src: url("../assets/fonts/bootstrap-icons-redef.woff2") format("woff2"),
  url("../assets/fonts/bootstrap-icons-redef.woff") format("woff");
}

这种解决方案的一个小缺点是，我必须在每次更新时检查node_modules/bootstrap-icons/font/bootstrap-icons.css，以确保我的重新定义仍与上面的文件同步。

- Juri Sinitson