我一直在阅读有关@font-face 规则的内容，并试图确定是否值得在项目中使用它来为标题呈现“富兰克林哥特式媒体”而不是像 sIfr 之类的东西。我认为对于不支持它的浏览器，我可以让它重新使用 Arial。
问题是我无法获得关于哪些浏览器支持以这种方式嵌入字体的明确答案。
到目前为止，我已经解决了 IE 的问题，但不支持 .ttf 文件。其他浏览器我不确定。
如果有人可以向我指出一些兼容性图表，那就太好了。
乔恩
jonhobbs
问问题
6647 次
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 文件格式。
[更新 2] Opera 10 和 Firefox 3.1 现在支持在当前发布的 alpha 或 beta 版本中链接到 TrueType 和 OpenType（但不包括 EOT）。
于 2009-01-28T16:27:28.893 回答
5
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 规则的简短教程。该站点是玩 CSS3 技巧（或者在本例中是 CSS2 提议的技巧）的绝佳资源。
在A List Apart上有一篇关于这个主题的更详尽的文章。
确保您在网页中嵌入的任何字体都在其许可证中声明可以这样做，因为该字体将存在于您的网络服务器上的公共目录中，任何人都可以免费下载。许可证中并不总是明确涵盖此用途，但您通常可以直接联系设计人员询问。只要您包含指向他们页面的链接，他们通常会让您使用字体。我不确定 Franklin Gothic Medium 是否被批准用于此用途，但我怀疑是否如此。
这里有一些免费字体的资源。如果您进行了足够多的挖掘，通常可以找到适合您的类似面孔：
于 2009-01-28T17:06:21.453 回答
1
@nezroy，这是一个更新：
[更新 2] Opera 10 和 Firefox 3.1 现在支持在当前发布的 alpha 或 beta 版本中链接到 TrueType 和 OpenType（但不包括 EOT）。
于 2009-01-28T16:31:13.927 回答
0
我记得 Safari 的人们自豪地写了一篇博文，说 Webkit 可以下载 ttf 字体并在页面源代码中自动使用它们。IE 一直支持下载位图字体。
于 2009-01-28T16:29:56.800 回答
0
如果您不害怕某些 Java 脚本，这篇文章可以帮助您：http ://www.webresourcesdepot.com/use-any-font-via-javascript-typefacejs/ 。
我自己没有使用过它，但它承诺支持任何浏览器上的任何字体......
于 2009-01-28T16:35:12.950 回答
0
好的，所以我认为最好的方法如下......
- 在第一个实例中使用 ttf 字体
- 回退到 IE 的 OET 字体
- 对于根本不支持嵌入字体的浏览器，请使用 Arial、sans-serif。
太好了，现在只需找到一些 EOT 字体。
于 2009-01-28T17:22:42.683 回答
0
写到这里：
http://interactivity.ifactory.com/2010/04/font-face/
现在基本上 95% 的现代浏览器都支持它：
IE6+、FF 3.5+、Chrome、Safari 3.1+、Opera。
于 2010-04-23T00:00:51.760 回答
-3
他们没有，您最好的选择是执行以下操作：
<h1 id="MyHeading">my heading</h1>
h1#MyHeading {
text-indent: -1000px;
width: 200px;
height: 50px;
background-image: url(myheading.jpg);
}
这篇文章解释了一些其他的选择。
编辑：我不知道为什么这被否决了。底线是没有可访问的、对 seo 友好的方式来做所有浏览器都支持的事情。如果您想疏远您的用户，请选择其他解决方案之一。否则，我会让我的用户对我的 -1 感到满意。
于 2009-01-28T16:29:04.040 回答