如果我只有WOFF和EOT,那么@ font-face支持哪些浏览器?


16

我们正在考虑购买一种字体,该字体仅允许以提供的格式在Web上使用:WOFF和EOT。

我不确定这些浏览器可以在哪些浏览器中运行,并且似乎找不到最新信息。仅这两个浏览器可以支持哪些浏览器?

我唯一的经验是使用fontspring的语法,该语法具有EOT,WOFF,TTF和SVG。


Answers:


23

这是使用@ font-face,hacky修复程序和所有工具加载标准方式

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

但是删除SVG,您将几乎完全失去对iOS <5.0的支持

是否可以使用一个出色的表来支持浏览器,通常另一个表用于EOT,另一个用于WOFF,另一个用于SVG,最后还有一个用于TTF。为了清楚起见,我在下面插入了它们,这将指导您进行什么测试,但是请记住,这将很快发生变化。

wyu编辑:我已经编译了一个表,以便您可以并行查看支持

@ font-face浏览器支持一般

@ font-face浏览器支持一般

EOT浏览器支持

EOT浏览器支持

WOFF浏览器支持

WOFF浏览器支持

SVG浏览器支持

SVG浏览器支持

TTF浏览器支持

TTF浏览器支持


3
为什么用两种不同的方式声明eot-.eot和.eot?#iefix?
2012年


2
对于以后检查此答案的任何人... Android> = 4.4现在支持WOFF caniuse.com/#feat=woff
ozke 2014年

3
亲爱的@ozke,我来自未来,感谢您分享这个有用的事实。您可能还想知道,到2015年底,不支持的Android通用浏览器版本的使用率woff将下降到全球用户的2%以下,Chrome将会取代通用的Android浏览器,支持Android(16%)和UC(8%)woff。Android的Firefox也是如此;但是,其使用量永远不会超过1%。您现在可以返回听Meghan Trainor的“所有关于低音的
声音

所以你现在只需要网络字体?
SuperUberDuper '16

1

SVG不会通过@ font-face带您到任何地方;但是,EOT受IE支持;其他所有主要浏览器均支持TTF和OTF。至于WOFF,从某种程度上看,它与TTF和OTF相似,很可能在与TTF或OTF相同的浏览器中受支持。我的建议是,如果您真的有兴趣,请在浏览器中尝试每个@ font-face扩展,看看会得到什么,然后将获得的内容提交给W3C,让他们为@ font-face描述符更新其标准页面。(当前它甚至不包括“安全”字体扩展名)。

如果所有其他方法都失败了,我可以肯定W3Schools是最新的:http : //www.w3schools.com/cssref/css3_pr_font-face_rule.asp


问题在于Safari Mobile 4.1及更低版本仅支持SVG。
toomanyairmiles 2012年

@toomanyairmiles这就是为什么最后,它使它对于您的“默认”而言看起来不错,然后对那些“可以”查看它的人们而言看起来很棒。由于大多数字体本身没有OTF,EOT和SVG,因此无法100%覆盖。
Jeff Langemeier 2012年

其实可以。我已经建立了几个站点,它们可以通过购买所有四种类型的字体或使用免费字体并自己生成文件来覆盖100%的内容-完美运行。
toomanyairmiles 2012年

@toomanyairmiles这是快速而松散的输入导致我死亡的地方,需要不一定总是100%覆盖,有时这种情况不会发生,设计人员需要记住,在最坏的情况下,人们正在使用旧的浏览器,例如100覆盖率并不总是意味着100%的覆盖率;我大约有40-50%的互联网用户仍在使用IE 7或更早版本,而IE 7或更高版本最初并不很好地支持字体,因此要获得真正的100%覆盖率,需要有一个底线看起来“不错”,或者至少使您的网站不受“更高级”字体的限制。
Jeff Langemeier 2012年

好吧,我在小型网站和主要品牌的网站上都尝试过。字体可在IE6和7中使用,渲染质量是否与现代浏览器一样好?否,但是效果很好。
toomanyairmiles 2012年

1

Webfont供应商确实需要为他们的字体提供即时支持-特别是因为这个!您可能会认为这是第二天性,即使对于基于云的环境(具有包含或排除选项)-如果人们被迫追捕列入黑名单的字体,难道这不只会在发现字体后鼓励盗版吗?@ eb_p1


1
等等,为什么?第一次问这个问题时,EOT已经死了,当您回答时,它已经变成了腐烂的尸体,而今天,我已经一年没有见过EOT字体了。
SilverbackNet
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.