字体系列与@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带来了新的问题，就是正常的字会加粗，加粗的字会变成"more bold"（变胖）。我从网上看到，IE 8不支持WOFF格式的@font-face规则（只支持EOT格式）。所以，我去掉了那些url 除了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

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

@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');

生成你的字体blowlink

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

Answer 3

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

现在由于您只添加了 url('../fonts/daxregular-webfont.eot') [注意 'regular']，IE 浏览器以常规或非粗体格式显示您的文本。因此，如果您想在 IE 上以粗体格式显示文本，则需要在 css 中添加额外的 url('../fonts/daxbold-webfont.eot') [注意 '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 字体似乎是一种许可字体，而不是免费字体。如果是，那么您可以使用安装在您系统的 'Font' 文件夹中的 ttf / otf 字体转换上述所有格式。要转换，只需从桌面上的字体文件夹复制 'regular' 或 'bold' 字体，然后使用 'Font Squirrel'

等网站进行转换

更新 2

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

对于常规或非粗体字体，

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

字体系列与@font-face src 崩溃

font-family crash with @font-face src

html

css

fonts

google-chrome

font-face