如何调试@ font-face问题？ [英] How to debug @font-face problems?

问题描述

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

我希望这会创建一个名为

 
在导入此字体后， code> .box {
 ... 
 font-family：'theMixPlainSemiBold'，sans-serif; 
 ... 
} 
  

我有 c>

当我打开页面时，我看到了 。中的 sans-serif 字体。

什么可能是问题？同样的情况发生在其他本地Web字体，而它的工作与谷歌字体。

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

解决方案

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

字体现在正确加载。

I have the following CSS code:

// 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;
}

I expect that this creates a new font family called theMixPlainSemiBold.

After importing this font I do:

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

I have the box class that have theMixPlainSemiBold font family.

When I open the page I see sans-serif font in the .box.

What can be the problem? Same is happening for the other local web fonts while it works good with Google Fonts.

How can I debug the font problems? I don't see any errors/warnings in developer tools. It looks for me like the font is not loaded from local files...

解决方案

While this is not a real answer to the question, I found the problem myself. Double-slashes (//) are not valid CSS comments! See this screenshot from Developer Tools:

So, my code becomes:

/* 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;
}

The fonts are correctly loaded now.

这篇关于如何调试@ font-face问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！