【问题标题】：@font-face declaration in css doesn't workcss 中的@font-face 声明不起作用
【发布时间】：2010-10-08 10:21:20
【问题描述】：

我正在帮助我姐姐将某人在 Flash 中为她制作的网站转换为 html。

他们在 Flash 中使用花哨的字体，我试图通过 @font-face 在 css 文件中定义这些字体。我尝试在 Firefox、IE 和 chrome 中打开页面，但在任何地方都看不到正确的字体。

我使用的声明是：

@font-face {
  font-family: "VAG Rounded";
  src: url("http://judith.huinink.net/chilax/VAGROUNL.OTF");
}

http://judith.huinink.net/chilax/index.htm 包含 html。

http://judith.huinink.net/chilax/chilax.css 包含完整的 CSS。

我检查了我可以下载字体文件，但是当我在浏览器中打开页面时它根本不使用字体。我一定是忽略了什么。有人有什么建议吗？

【问题讨论】：

它适用于我（Safari 3.2.1/Mac）。

标签： html css fonts font-face

【解决方案1】：

http://www.css3.info/preview/web-fonts-with-font-face/

【讨论】：

【解决方案2】：

几乎没有浏览器支持@font-face:When can I use...

【讨论】：

这个分析器现在不正确，几乎所有的浏览器都支持 font-face

【解决方案3】：

更新

去年，浏览器对字体的支持有了显着改善。我建议阅读Tim Brown's excellent article on the subject，它详细描述了如何让网络字体在大多数现代浏览器中工作。

原答案

实际上，@font-face 现在完全无法使用。只有两种浏览器支持它——Windows 版 Internet Explorer 5 或更高版本，以及 Safari 3.1。

更糟糕的是，IE 和 Safari 不支持相同的字体格式。 IE 仅支持EOT，而 Safari 则支持更常见的 TrueType (.ttf) 和 OpenType (.otf) 格式。

【讨论】：

@font-face 现在被 IE、Firefox、Safari、Chrome 和 Opera 支持
嗯，这个问题是在一年前提出的。 :-)
这就是为什么它是一个有用的评论！

【解决方案4】：

查看曾经流行的sIFR 或不依赖闪存的typeface.js

【讨论】：

【解决方案5】：

如何在所有支持它的浏览器中使用@font-face：Jon Tangerine's blog

ttf2eot 是一个很好的 Unix 和 Windows 字体转换器，因此您不必使用可怕的旧 Microsoft WEFT。它转换整个字体，而不仅仅是一些字符。

Here's 与 sIFR 一起使用的 javascript，它为启用 @font-face 的浏览器禁用 sIFR。

Flash 需要消亡，所以这里有另一种 sIFR 替代方案：facelift。这是一个生成图像的服务器端脚本。

afaik all sIFR 替换的问题在于，选择和复制文本并不能真正起作用——您要么看不到选择，要么无法选择少于一个单词或行。还有使用

做正确的事，现在使用最先进的技术：@font-face 与 TTF 或 OTF，以及 IE 和旧浏览器的后备。最好保持您的 HTML 干净，并在单独的 javascript 和 CSS 文件中实现这些回退。对于 IE，您可能需要使用“条件 cmets”，如我上面的第一个链接中所述。对于禁用了 javascript 的浏览器，请始终在末尾指定带有网络安全字体的替换字体列表。

【讨论】：

【解决方案6】：

font-face 成为主流

截至 2010 年 1 月，所有主要的新浏览器都支持 font-face

Safari 3.1
IE - 所有版本
火狐3.6
铬 4
歌剧 10

见http://webfonts.info/wiki/index.php?title=@font-face_browser_support

【讨论】：

【解决方案7】：

我遇到过必须在域中包含 WWW 的情况。没有它，它就行不通。

【讨论】：

这里不太适用，地址已经有子域（本例为judith）