如何调试@font-face问题？

我有以下 CSS 代码：

// theMixPlainSemiBold
@font-face {
    font-family: 'theMixPlainSemiBold';
    src: url('/css/fonts/... .eot');
    src: url('/css/fonts/... .eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/... .svg#TheMixPlainSemiBoldSemiBold') format('svg'),
         url('/css/fonts/... .woff') format('woff'),
         url('/css/fonts/... .ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

我希望这会创建一个名为的新字体系列theMixPlainSemiBold.

导入此字体后，我会执行以下操作：

.box {
    ...
    font-family: 'theMixPlainSemiBold', sans-serif;
    ...
}

我有box类有theMixPlainSemiBold字体系列。

当我打开页面时我看到sans-serif字体在.box.

可能是什么问题？其他本地网络字体也会发生同样的情况，但它与 Google Fonts 配合得很好。

如何调试字体问题？我在开发人员工具中没有看到任何错误/警告。在我看来，字体不是从本地文件加载的......

首先，使用明确的习惯font-familyname 可能有助于调试，因为它会阻止触发和使用本地字体。

然后，虽然这不限于@font-face问题，Firefox 开发者工具的控制台肯定可以帮助调试 CSS 问题。

在你的情况下，它会检测到不良评论：

Selector expected.  Ruleset ignored due to bad selector.  yourfile.css:23

就我而言，由于 copypasta 后编辑错误，我的尾随逗号而不是分号，这阻止了 Firefox 下载字体：

@font-face{
    font-family: SuperFont;
    src: url('../fonts/Superfont.ttf'),
}

控制台提出：

Error in parsing value for ‘src’.  Skipped to next declaration.  myfile:18

或者控制台可能会抱怨：

downloadable font: download failed (font-family: "myfont" style:normal weight:normal stretch:normal src index:0): status=2147746065 source: url/to/font.otf

（这通常会在字体 URL 上出现 404 错误，该死的拼写错误……）