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引入了新的问题，即正常的单词将是粗体，粗体的单词将变得更加大胆＆＃34; （变得更胖）。我从互联网上看到，IE 8不支持带WOFF格式的@ font-face规则（仅支持EOT格式）。所以，我除了eot之外我拿出那些网址，但仍面临问题。

我将我的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的body中仅包含.eot格式的webfont。 .eot格式仅适用于IE。

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

现在，为什么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字体转换所有上述格式，该字体已经安装在您的系统＆＃39;字体＆＃39;夹。转换只需复制常规＆＃39;或者＆＃39;粗体＆＃39;来自桌面上该字体文件夹的字体，然后使用'Font Squirrel'

等网站进行转换

更新2

IE只需要.eot版本的网络字体，.woff不会影响任何IE版本的文字。所以不要害怕.woff。
您需要更正字体定义，这在上一篇文章中仍然不正确 -

用于常规或非粗体字体，

@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结构，请使用您的课程。

Answer 2

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

@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 3

添加更多字体文件，例如

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

@ font-face src的font-family崩溃

3 个答案: