Question

我一直在阅读有关@ font-face规则并试图找出它是否值得在一个项目中使用它来为标题渲染“franklin gothic medium”而不是像sIfr这样的东西。我认为对于不支持它的浏览器，我可以让它回到Arial上。

问题是我无法得到关于哪些浏览器支持以这种方式嵌入字体的明确答案。

到目前为止，我已经解决了IE的问题，但不支持.ttf文件。其他浏览器我不确定。

如果有人能指出我的兼容性图表，那就太棒了。

乔恩

Answer 1

This article讨论了关于中途的浏览器支持。这是最相关的一点，尽管整个事情值得一读：

CSS3（甚至1997年和1998年的CSS2草案）早已承诺使用@ font-face规则进行字体嵌入的标准化方法。许多人可能不知道的是，Opera 9.5已经支持此规则，为Mac，Windows和iPhone OS提供Safari版本，并且承诺用于Firefox 3.1。以及IE6及更高版本。

可悲的是，虽然支持@ font-face暗示了Opera 9.5和Firefox 3.1（见下面＃4中的评论）但事实上并非如此。这很可惜。

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

编辑：包括this update的答案中的Ric Tokyo。

[Update 2] Opera 10和Firefox 3.1现在支持在当前发货的alpha或beta版中链接到TrueType和OpenType（但不支持EOT）。

Answer 2

Safari 3.1（和Webkit Nightly版本），Firefox 3.1和Opera 10支持.ttf（TrueType字体）和.otf（OpenType字体）的@ font-face嵌入。 Internet Explorer版本5+仅支持.eot（专有嵌入式开放格式）的@ font-face嵌入。

Microsoft制作了一个名为WEFT的可怕小字体转换工具（仅限Windows），您可以使用该工具将大多数字体格式转换为.eot。

CSS3.info对如何使用@ font-face规则有一个很好的brief tutorial。该网站是玩CSS3技巧的好资源（或者在这种情况下是CSS2提出的技巧）。

A List Apart上有关于此主题的更全面的文章。

确保您在网页中嵌入的任何字体都表明可以在其许可证中执行此操作，因为该字体将存储在公共目录中的Web服务器上，任何人都可以免费下载。许可证并不总是明确涵盖此用途，但您通常可以直接联系设计人员询问。只要您包含指向其网页的链接，它们通常会让您使用字体。我不确定Franklin Gothic Medium是否被批准用于此用途，但我怀疑它是不是。

以下是免费字体的一些资源。如果你做了足够的挖掘，你通常可以找到适合你的类似面孔：

Answer 3

web kit also does

quirks mode很长一段时间以来都是js和css兼容性表的好资源

Answer 4

@nezroy，here是一个更新：

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

Answer 5

我记得Safari人自豪地写了一篇博文，Webkit可以下载ttf字体并在页面源中自动使用它们。 IE支持永远下载位图字体。

Answer 6

如果你不害怕某些Java脚本，这篇文章可以帮助你：http://www.webresourcesdepot.com/use-any-font-via-javascript-typefacejs/。

我自己没有使用它，但它承诺支持任何浏览器上的任何字体...

Answer 7

好的，所以我认为最好的方法如下......

在第一个实例中使用ttf字体
回归IE的OET字体
对于完全不支持嵌入字体的浏览器，请依赖Arial，sans-serif。

很好，现在只需找到一些EOT字体。

Answer 8

在这里写下来：

http://interactivity.ifactory.com/2010/04/font-face/

现在基本上95％的现代浏览器都支持它：

IE6 +，FF 3.5 +，Chrome，Safari 3.1 +，Opera。

Answer 9

他们不，你最好的选择是做以下事情：

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

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

This aricle解释了一些其他选择。

编辑：我不知道为什么会被投票。底线是没有可访问的，seo友好的方式来做你想要的所有浏览器支持的。如果您想疏远您的用户，请选择其他解决方案之一。否则，生病让我的用户满意我的-1。

哪些浏览器支持字体嵌入

9 个答案: