如何调试@ font-face问题？

Question

我有以下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.

可能是什么问题？其他本地Web字体也是如此,而它与Google字体一起使用效果很好.

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

Answer 1

首先，使用明确的自定义font-family名称可能有助于调试，因为它会阻止您的本地字体被触发和使用。

然后，虽然这不仅限于@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 之后，该死的错别字……）

Answer 2

虽然这不是问题的真正答案，但我自己发现了问题。双斜杠 ( //) 不是有效的 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;
}

现在字体已正确加载。