字体系列崩溃与@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

尝试添加不同类型的字体并同时指定类型..

@font-face {
  font-family: 'dax-regularregular';
  src: url('../fonts/daxregular-webfont.eot'); /* IE9 Compat Modes */
  src: url('../fonts/daxregular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/daxregular-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/daxregular-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/daxregular-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/daxregular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Answer 2

添加更多字体文件，如

font-family: 'dax-regularregular';
src: url('dax-regularregular.eot');
src: url('dax-regularregular.eot?#iefix') format('embedded-opentype'),
     url('dax-regularregular.woff') format('woff'),
     url('dax-regularregular.ttf') format('truetype'),
     url('dax-regularregular.svg#open_sansregular') format('svg');

生成你的字体链接

http://www.fontsquirrel.com/tools/webfont-generator

Answer 3

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

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

现在，为什么 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 版本的web-font，.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>

它应该可以正常工作。

注意：已经展示了在 inline 标签中应用字体来演示 html 结构，请使用你的类。