如何调试@ 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字体。

可能是什么问题？其他本地网络字体也是如此，而它与谷歌字体配合良好。

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

Answer 1

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

现在正确加载字体。

Answer 2

@font-face {
    font-family: anyname;
    src: url('folder/folder2/folder3/theMixPlainSemiBold.ttf');
        font-weight: normal;
        font-style: normal;
}

然后像这样使用它：

#sample{
    font-family:anyname;
}

您可以使用其中的任何名称。 /在网址中很重要，因为它显示它位于文件夹中。

Answer 3

首先，使用明确的自定义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

（这通常会跟随字体网址上的404，该死的拼写错误......）

Answer 4

如果您正在进行原型设计并将新生成的HTML视为静态本地文件，则可能无法加载字体。 （由于浏览器的一些跨域策略？）

因此，需要通过（本地）服务器请求您的html。

Answer 5

请检查您的源链接

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

也许你忘记了../，因为如果谷歌的字体工作正常，那么你的字体链接（来源）一定是错的