html - @font-face src 导致字体系列崩溃

Question

美好的一天，

我有一个css，代码如下:

@font-face {
    font-family: 'dax-regularregular';
    src: url('../fonts/daxregular-webfont.eot');
}

body {
    font-family: 'dax-regularregular';
}

并且，在我的 html 代码中，我只需编码:

<b>this is bold</b> + this is normal

这在chrome中可以正确显示，但在IE中却不能(全部变为正常，而不是粗体)。

如果我删除 css 文件中的 body{}，那么 IE 将正常工作。 如果我删除@font-face内的font-family或src，那么IE将正常工作。

我在网上做了一些研究，发现 .eot 文件不支持 chrome，这就是为什么 chrome 不会受到影响并正确显示。 (不确定我的理解是否正确)

敬请指教。如果有的话，请提出您的解决方案。

** 编辑 **

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

** 编辑版本 2 ** 此解决方案可以修复 IE 9、IE 10 和 IE 11 问题。但， 这个解决方案给IE 8带来了新的问题，即正常的单词会变成粗体，而粗体的单词会变得“更粗”(变得更胖)。我从网上看到，IE 8不支持WOFF格式的@font-face规则(仅支持EOT格式)。所以，我取出了除eot之外的那些url，但仍然面临问题。

我将 css 代码更改为如下，但在 IE 8 中仍然出现同样的问题:

@font-face {
    font-family: 'dax-regularregular';
    src: url('../fonts/daxbold-webfont.eot');
    src: url('../fonts/daxbold-webfont.eot?#iefix') format('embedded-opentype');
    font-weight: bold;
    font-style: normal;
}

Answer 1

正如您的代码所示，您在 css 正文中仅包含 .eot 格式的 webfont。 .eot 格式仅适用于 IE。

现在，由于您仅添加了 url('../fonts/daxregular-webfont.eot') [notice 'regular']，IE 浏览器会以常规或非常规方式显示您的文本- 粗体格式。因此，如果您想在 IE 上以粗体格式显示文本，则需要添加额外的 url('../fonts/daxbold-webfont.eot') [notice 'bold'] css 中的定义以及字体文件夹中的相关字体。

现在，为什么 chrome 可以正确显示它？我怀疑 chrome 是否会以您想要的字体显示您的文本，即 dax 或 .eot。由于您尚未在 css 中定义 .woff 字体(chrome 通常需要)，因此很可能使用页面上其他 css 中定义的其他字体。

要在使用自定义字体的所有浏览器中一致地显示页面，您需要在 CSS 中添加所有字体定义，包括在字体文件夹中添加相同的字体定义 -

`@font-face {
  font-family: 'dax-regularregular';
  src: url('../fonts/daxregular-webfont.eot');
  src: url('../fonts/daxregular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/daxregular-webfont.woff2') format('woff2'),
       url('../fonts/daxregular-webfont.woff') format('woff'),
       url('../fonts/daxregular-webfont.ttf')  format('truetype'),
       url('../fonts/daxregular-webfont.svg#svgFontName') format('svg');
}`

---

更新:

首先，除了上面提到的字体定义之外，您还必须在 CSS 中添加其他字体格式定义，例如

对于粗体，

@font-face {
      font-family: 'dax-bold';
      src: url('../fonts/daxbold-webfont.eot');
      src: url('../fonts/daxbold-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/daxbold-webfont.woff2') format('woff2'),
           url('../fonts/daxbold-webfont.woff') format('woff'),
           url('../fonts/daxbold-webfont.ttf')  format('truetype'),
           url('../fonts/daxbold-webfont.svg#svgFontName') format('svg');
    }

对于半粗体，

@font-face {
      font-family: 'dax-semibold';
      src: url('../fonts/daxsemibold-webfont.eot');
      src: url('../fonts/daxsemibold-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/daxsemibold-webfont.woff2') format('woff2'),
           url('../fonts/daxsemibold-webfont.woff') format('woff'),
           url('../fonts/daxsemibold-webfont.ttf')  format('truetype'),
           url('../fonts/daxsemibold-webfont.svg#svgFontName') format('svg');
    }

依此类推，将相关字体包含在字体文件夹中，无论您需要什么。

第二，获取这些字体。不确定，但我认为您的 dax 字体似乎是一种许可字体，而不是免费字体。如果是，那么您可以使用已安装在系统“字体”文件夹中的 ttf/otf 字体来转换所有上述格式。要转换，只需从桌面上的字体文件夹中复制“常规”或“粗体”字体，然后使用 'Font Squirrel' 等网站进行转换。

更新2

1. IE 仅需要 .eot 版本网络字体，拥有 .woff 不会影响任何 IE 版本中的文本。所以不要害怕 .woff。

2. 您需要更正字体定义，该定义在上一篇文章中仍然不正确 -

对于常规或非粗体字体，

@font-face {
    font-family: 'dax-regularregular';
    src: url('../fonts/daxregular-webfont.eot');
    src: url('../fonts/daxregular-webfont.eot?#iefix') format('embedded-opentype');
}

对于粗体格式字体，

@font-face {
    font-family: 'dax-bold';
    src: url('../fonts/daxbold-webfont.eot');
    src: url('../fonts/daxbold-webfont.eot?#iefix') format('embedded-opentype');
}

你的 html 应该是这样的 -

<p style="font-family: 'dax-regularregular';"><span style="font-family: 'dax-bold';">bold text lying here</span> unbold text lying here</p>

它应该可以正常工作。

注意:已经展示了在内联标记中应用字体来演示 html 结构，请使用您的类进行同样的操作。