字体家庭崩溃与@ font-face src [英] font-family crash with @font-face src

查看：157
本文介绍了字体家庭崩溃与@ font-face src的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

好日子，

我有一个css，代码如下： 

  @ font-face {
 font-family：'dax-regularregular'; 
 src：url（'../ fonts / daxregular-webfont.eot'）; 
} 
 
 body {
 font-family：'dax-regularregular'; 
}

而且，在我的html代码中，我简单地编码：

 < b>这是粗体的< / b> +这是正常的

这在chrome中显示正确，但不在IE中（全部变为正常，如果我在我的css文件中删除 body 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 ''）格式（'woff'），
 url（'../ fonts / daxregular-webfont.ttf'）格式（'truetype'），
 url（'../ fonts / daxregular-webfont .svg＃dax-regularregular'）格式（'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'）格式（'embedded-opentype'）; 
 font-weight：bold; 
 font-style：normal;


解决方案

在css中只包含了 .eot 格式的webfont。 .eot 格式仅适用于IE。



现在，您只添加了 url（'../ fonts / daxregular-webfont.eot'） [请注意常规]，IE浏览器以常规或非粗体格式显示您的文本。因此，如果你想在IE上显示粗体文本，你需要添加一个额外的 url（'../ fonts / daxbold-webfont.eot'） [notice'bold'] definition in your css and also the related font in your font folder。



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



要在所有使用自定义字体的浏览器中一致显示您的页面，您需要在您的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 ''）格式（'woff2'），
 url（'../ fonts / daxregular-webfont.woff'）格式（'woff'），
 url（'../ fonts / daxregular-webfont .ttf'）格式（'truetype'），
 url（'../ fonts / daxregular-webfont.svg＃svgFontName'）format（'svg'）; 
}`





UPDATE ：



首先，上面提到的其他字体定义您还必须在您的css中添加其他字体格式定义，如



为粗体，

  @ font-face {
 font-family：'dax -胆大'; 
 src：url（'../ fonts / daxbold-webfont.eot'）; 
 src：url（'../ fonts / daxbold-webfont.eot？#iefix'）format（'embedded-opentype'），
 url（'../ fonts / daxbold-webfont.woff2 ''）格式（'woff2'），
 url（'../ fonts / daxbold-webfont.woff'）格式（'woff'），
 url（'../ fonts / daxbold-webfont .ttf'）格式（'truetype'），
 url（'../ fonts / daxbold-webfont.svg＃svgFontName'）format（'svg'）; 
}

用于semibold， 

  @ 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 ''）格式（'woff2'），
 url（'../ fonts / daxsemibold-webfont.woff'）格式（'woff'），
 url（'../ fonts / daxsemibold-webfont .ttf'）格式（'truetype'），
 url（'../ fonts / daxsemibold-webfont.svg＃svgFontName'）format（'svg'）; 
}

等等，包括字体文件夹中的相关字体，无论你需要什么。 p>

其次，获取这些字体。不知道，但我认为你的 dax 字体似乎是许可字体，而不是免费字体。如果是的话，那么你可以使用已经安装在系统'Font'文件夹中的 ttf / otf 字体来转换上述所有格式。要转换只是从您的桌面上的该字体文件夹复制'常规'或'粗体'字体，然后使用网站转换它，如'字体松鼠'



更新2


  1. IE仅需要 .eot 版本web-font，其中<​​code> .woff 不会影响任何IE版本的文本。因此，不要害怕 .woff 。


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


为常规字体或非字体字体， 

  @ font-face {
 font-family：'dax-regularregular'; 
 src：url（'../ fonts / daxregular-webfont.eot'）; 
 src：url（'../ fonts / daxregular-webfont.eot？#iefix'）格式（'embedded-opentype'）; 
}

为粗体字体， 

  @ font-face {
 font-family：'dax-bold'; 
 src：url（'../ fonts / daxbold-webfont.eot'）; 
 src：url（'../ fonts / daxbold-webfont.eot？#iefix'）格式（'embedded-opentype'）;

您的html应该是这样的 - 

 < p style =font-family：'dax-regularregular';>< span style =font-family：'dax-bold'; >粗体文字在这里< / span>展开文字躺在这里< / p>

它应该适用于所有情况。



注意：在内联标签中显示应用字体来演示html结构，请使用相同的类。

Good day,

I have a css, code is as follow:

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

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

And, in my html code, I simply code:

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

And this is display correctly in chrome, but not in IE (All become normal, not bold).

If I remove the body{} in my css file, then IE will working fine. If I remove either font-family or src inside @font-face, then IE will working fine.

I do some research on internet, found that .eot file will not support for chrome, that's why chrome wont affected and display correctly. (Not sure my understanding is correct or not)

Kindly advise. And suggest your solution if you have.

** Edit **

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

** Edit version 2 ** This solution can fix IE 9, IE 10, and IE 11 issue. But, This solution introduce new issue to IE 8, which is , normal word will be bold, and the bold word will become "more bold" ( become fatter ). I saw from internet, IE 8 is not support the @font-face rule with the WOFF format (only support for EOT format). So, i take out those url except eot, but still facing the problem.

I change my css code to as follow, but still same hit issue in 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;
}

解决方案

As your code shows that you have included only .eot format webfont in body in css. The .eot format will work only on IE.

Now since you have added only url('../fonts/daxregular-webfont.eot') [notice 'regular'], the IE browser showing your text in regular or not-in-bold format. So if you want to display your text in-bold format on IE, you would need to add an additional url('../fonts/daxbold-webfont.eot') [notice 'bold'] definition in your css and also the relevant font in your font folder.

Now, why chrome displays it properly? I doubt if chrome would be showing your text in your desired font i.e. dax or .eot. Since you have not defined .woff font in your css (which chrome normally requires), most probably using some other font defined in some other css on your page.

To display your page consistently across all browsers using for custom font you would need to add all fonts definition in your css including adding the same in your font folder -

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

UPDATE:

First, other then font definition mentioned above you'll also have to add other font formats definitions in your css like

for bold,

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

for semibold,

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

and so on including relevant fonts in font folder, whichever you need.

Second, for getting these fonts. Not sure but I think your dax font seems a licensed font and not the free one. If yes, then you can convert all above mentioned formats using the ttf / otf font which would have been installed in your system's 'Font' folder. To convert just copy the 'regular' or 'bold' font from that font folder on your desktop and then convert it using website like 'Font Squirrel'

UPDATE 2

  1. The IE needs .eot version web-font only, having .woff won't affect text in any IE version. So don't fear of .woff.

  2. You need to correct your font definition, which is still incorrect in your last post -

for regular or unbold font, 

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

for bold format font,

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

Your html should look like this -

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

It should work proper across.

Note: Have shown applying font in inline tag to demonstrate html structure, please use your class for the same.

这篇关于字体家庭崩溃与@ font-face src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆