代码之家 › 专栏 › 技术社区 › Jeroen Huinink

@CSS中的字体声明不起作用

font-face fonts css html

Jeroen Huinink · 技术社区 · 15 年前

我正在帮助我妹妹将一个有人在Flash中为她做的网站转换成HTML。

他们在我试图通过@FONT face在CSS文件中定义的Flash中使用花哨的字体。我试着用火狐,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。

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

7 回复 | 直到 6 年前

Ben Blank 14 年前

更新

去年,浏览器对字体的支持有了很大的改善。我建议你阅读 Tim Brown's excellent article on the subject 详细介绍了如何在大多数现代浏览器中使用Web字体。

原始答案

从现实的角度来看, @font-face 现在完全无法使用。只有两种浏览器支持Windows Internet Explorer、5版或更高版本以及Safari 3.1。

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

Jon Winstanley 14 年前

字体成为主流

截至2010年1月,所有主要的新浏览器都支持字体

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

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

Chad Birch 15 年前

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

Scott 15 年前

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

meenah 15 年前

如何在所有支持@FONT face的浏览器中使用它:at Jon Tangerine's blog

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

Here's 与sifr一起使用的javascript,它为支持@font-face的浏览器禁用sifr。

flash需要消亡,所以这里有另一个替代sifr的方法: facelift . 它是一个生成图像的服务器端脚本。

afaik all sifr替换的问题在于,选择和复制文本实际上不起作用——您要么看不到所选内容,要么无法选择少于一个单词或一行的内容。还有cuf_3 n,它使用<canvas>,因此它只在更新的浏览器上工作,大多数浏览器都有@font face。

做正确的事情,使用最先进的技术:TTF或OTF的@FONT face,以及IE和旧浏览器的回退。最好保持HTML的整洁,并在单独的javascript和css文件中实现这些回退。对于IE,您可能需要使用“条件注释”,如我上面第一个链接中所述。对于禁用javascript的浏览器,始终在末尾指定一个具有Web安全字体的替换字体列表。

garrow 15 年前

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

Jamie 14 年前

我遇到过WWW必须包含在域中的情况。没有它,它就不起作用。