css 中的 @font-face 声明不起作用
我正在帮助我姐姐将别人用 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.html htm 包含 html。
http://judith.huinink.net/chilax/chilax.css 包含完整的CSS。
我检查过是否可以下载字体文件，但当我在浏览器中打开页面时，它根本不使用该字体。 我一定是忽略了什么。 有人有什么建议吗？
I'm helping my sister convert a website that somebody did for her in flash into html.
They use fancy fonts in the flash that I am trying to define in a css file through @font-face. I tried opening the page in firefox, IE and chrome, but nowhere do I see the proper font.
The declaration that I am using is:
@font-face {
font-family: "VAG Rounded";
src: url("http://judith.huinink.net/chilax/VAGROUNL.OTF");
}
http://judith.huinink.net/chilax/index.htm contains the html.
http://judith.huinink.net/chilax/chilax.css contains the full css.
I checked that I can download the font file, but it simply doesn't use the font when I open the page in a browser. I must be overlooking something. Does anybody have any suggestions?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
如何在所有支持 @font-face 的浏览器中使用它：位于 Jon Tangerine 的博客
ttf2eot 是一个不错的字体转换器适用于 Unix 和 Windows，因此您不必使用可怕的旧 Microsoft WEFT。 它转换整个字体，而不仅仅是某些字符。
这里 与 sIFR 一起使用的 javascript，为支持 @font-face 的浏览器禁用 sIFR。
Flash 需要消亡，因此这里有 sIFR 的另一种替代方案：facelift。 它是一个生成图像的服务器端脚本。
据我所知，所有 sIFR 替换的问题在于，选择和复制文本实际上不起作用——您要么看不到选择，要么不可能选择少于一个单词或一行。 还有使用
做正确的事，立即使用最先进的技术：@font-face 与 TTF 或 OTF，以及 IE 和旧浏览器的后备。 最好保持 HTML 干净并在单独的 javascript 和 CSS 文件中实现这些后备。 对于 IE，您可能需要使用“条件注释”，如上面我的第一个链接中所述。 对于禁用 JavaScript 的浏览器，请始终指定替换字体列表，并在末尾添加网络安全字体。
How to use @font-face in all browsers that support it: at Jon Tangerine's blog
ttf2eot is a nice font converter for Unix and Windows so you don't have to use the horrible old Microsoft WEFT. It converts the whole font, not just some characters.
Here's a javascript to use with sIFR that disables sIFR for @font-face enabled browsers.
Flash needs to die, so here's another alternative to sIFR: facelift. It's a serverside script that generates images.
The problem with afaik all sIFR replacements is that selecting and copying text doesn't really work -- you either don't see the selection, or it's impossible to select less than a word or line. There's also Cufón which uses <canvas>, so it only works on newer browsers, most of which have @font-face anyway.
Do the right thing, use the state-of-the-art technology now: @font-face with TTF or OTF, and fallbacks for IE and old browsers. Preferably keep your HTML clean and implement those fallbacks in separate javascript and CSS files. For IE you might need to use "conditional comments" as explained in my first link above. For browsers with javascript disabled, always specify a list of replacement fonts with the web-safe fonts at the end.
查看曾经流行的 sIFR 或不依赖 Flash 的 typeface.js
Check out the ever popular sIFR or with no flash dependency, typeface.js
我遇到过 WWW 必须包含在域中的情况。 没有它，它就无法工作。
I've come across situations where WWW must be included in the domain. Without it, it wouldnt work.
font-face 成为主流
截至 2010 年 1 月，所有主要新浏览器都支持 font-face
请参阅 http://webfonts.info/wiki/index.php?title=@font-face_browser_support
font-face goes mainstream
As of January 2010 all major new browsers support font-face
See http://webfonts.info/wiki/index.php?title=@font-face_browser_support
更新
去年，浏览器对字体的支持有了相当显着的改进。 我建议阅读 Tim Brown 的优秀文章主题，详细描述了如何让网络字体在大多数现代浏览器中工作。
原始答案
实际上，
@font-face现在完全无法使用。 只有两种浏览器支持它：Windows 版 Internet Explorer 版本 5 或更高版本以及 Safari 3.1。更糟糕的是，IE 和 Safari 不支持相同的字体格式。 IE 仅支持 EOT，而 Safari 支持更常见的 TrueType (.ttf) 和 OpenType ( .otf) 格式。
Update
In the last year, browser support for fonts has improved rather dramatically. I'd suggest reading Tim Brown's excellent article on the subject, which describes in detail how to get web fonts working in most modern browsers.
Original answer
In realistic terms,
@font-faceis completely unusable right now. Only two browsers support it — Internet Explorer for Windows, version 5 or better, and Safari 3.1.Worse, IE and Safari do not support the same font formats. IE supports only EOT, while Safari instead supports the more common TrueType (.ttf) and OpenType (.otf) formats.
几乎没有浏览器支持@font-face：我什么时候可以使用...
Almost no browsers support @font-face: When can I use...
css3.info/preview/web-fonts-with-font-face/" rel="nofollow noreferrer">http://www.css3.info/preview/web-fonts-with-font-face/
http://www.css3.info/preview/web-fonts-with-font-face/