哪些浏览器支持字体嵌入?

9
我一直在研究@font-face规则,并试图确定它是否值得在项目中使用它来呈现“Franklin Gothic Medium”作为标题,而不是像sIfr这样的东西。我想对于不支持它的浏览器,我可以让它回退到Arial。
问题是我很难得到一个明确的答案,哪些浏览器支持以这种方式嵌入字体。
到目前为止,我已经确定IE支持,但不支持.ttf文件。其他浏览器我不确定。
如果有人能指向一些兼容性表格,那就太好了。
Jon
9个回答

7

这篇文章讨论了浏览器对中途的支持。以下是最相关的部分,但整篇文章都值得一读:

CSS3(甚至是1997年和1998年CSS2的草案)长期以来一直承诺使用@font-face规则作为字体嵌入的标准化方法。许多人可能不知道的是,该规则已经在Opera 9.5、Mac、Windows和iPhone OS版Safari的发布版本中得到支持,并承诺将在Firefox 3.1中得到支持,以及IE6及更高版本。

然而,遗憾的是,尽管在Opera 9.5和Firefox 3.1中暗示支持@font-face(请参见下面第4条评论),但实际情况并非如此。

不过还有一个问题。除IE外的所有浏览器都支持链接到TrueType字体文件。Microsoft仅支持专有的EOT文件格式。

编辑:包括this updateRic Tokyo的回答。

[更新 2] Opera 10 和 Firefox 3.1 现在在当前发布的 alpha 或 beta 版本中支持链接到 TrueType 和 OpenType(但不支持 EOT)。

5
Safari 3.1(以及Webkit Nightly版本)、Firefox 3.1和Opera 10支持.ttf(TrueType字体)和.otf(OpenType字体)的@font-face嵌入。Internet Explorer版本5+仅支持.eot(一种专有的嵌入式开放类型格式)的@font-face嵌入。
微软推出了一个名为WEFT的可怕的小型字体转换工具(仅限Windows),您可以使用它将大多数字体格式转换为.eot。
CSS3.info网站上有一个很好的、简短的教程,介绍如何使用@font-face规则。该网站是玩转CSS3技巧(或在这种情况下是CSS2提议技巧)的绝佳资源。
有一篇更详细的文章介绍了这个主题,它发布在A List Apart上。
请确保在网页中嵌入的任何字体在其许可证中声明可以这样做,因为该字体将存储在您的 Web 服务器上的公共目录中,任何人都可以免费下载。此用途并不总是明确包含在许可证中,但通常可以直接联系设计师进行询问。只要包含到他们的页面链接,他们通常会让您使用字体。我不确定 Franklin Gothic Medium 是否被批准用于此用途,但我怀疑它没有。

以下是一些免费字体资源。如果您足够努力挖掘,通常可以找到适合您的类似字体:


1

1

@nezroy,这里有一个更新:

[更新2] Opera 10 和 Firefox 3.1 现在支持在当前版本的 alpha 或 beta 中链接 TrueType 和 OpenType 字体(但不支持 EOT)。


0

0
我记得 Safari 团队曾自豪地发布过一篇博客文章,介绍 Webkit 可以下载 ttf 字体,并在页面中自动使用它们。IE 一直支持下载位图字体。

0

0

好的,我认为最好的方法是按照以下步骤进行...

  • 首先使用ttf字体
  • IE浏览器则使用OET字体
  • 对于完全不支持嵌入式字体的浏览器,则使用Arial、sans-serif字体。

太棒了,现在只需要找到一些EOT字体。


-3

他们不会这样做,你最好的选择是像下面这样做:

<h1 id="MyHeading">my heading</h1>

h1#MyHeading {
    text-indent: -1000px;
    width: 200px;
    height: 50px;
    background-image: url(myheading.jpg);
}

这篇文章解释了一些其他的替代方案。

编辑:我不知道为什么这个被踩了。底线是没有一种适用于所有浏览器的可访问、SEO友好的方法来实现你想要的。如果你想要疏远你的用户,那就选择其他的解决方案吧。否则,我会通过我的-1来让我的用户满意。


嗨,安德鲁。我们正在努力摆脱使用图片。@font-face 既有利于 SEO 又易于访问。 - jonhobbs
出于SEO的考虑,您至少应该建议添加名称或alt选择器。 - pizza247

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接