@ font-face是在IE旁边的每个主要浏览器中实现的新CSS3功能之一,这也是在不合规的浏览器中可以劣化的那种东西。让’s face it, SIFR. 与大多数文本替代技术一样痛苦。 @ Font-Face可以解决这个问题,网络设计师将是Happy,Web开发人员可以在30秒内实现它。

也许你们有些人看到它,但我真的在这个网站上用@ font-face测试了一堆字体。不幸的是,它还没有结果,我也很喜欢。

// So easy
@font-face {
 font-family: "Helvetica neue normal";
 src: url("http://site/fonts/helvetica.ttf")
 font-weight:normal
}
 
.textStuff{
 font-family:Helvetica neue normal,arial;
}

我现在拥有的最大问题是如何呈现字体。大部分时间字体变得有点锯齿,而不是完全呈现为真实的字体。这种问题变得更加明显,尺寸小,文字为10或11的字体大小,作为模糊的坏习惯。在浏览器之间的字体上也存在差异。

您还必须考虑您在文本后加载后的酷字体加载的事实,该事实是该网站正在加载时。这意味着你可能会看到你的默认Verdana字体了半秒,如果你过去已经使用SIFR,那么你的耳朵会熟悉的东西。


查看原始版本

更新
您可以使用@ font-face使用IE使用OET格式。 Internet Explorer仅支持转换为EOT(嵌入式Opentype)的TrueType字体。也是一韩元’t接受一个包含SRC描述符中的格式字符串的字体。

就像我说的那样,不要就像我想要的那样

我不建议将字体转换为OpenType。不仅是它“illegal”使用大多数字体,但我用两种不同的软件转换的所有字体都被错误地呈现,使用@ font-face(但photoshop中的良好)使用不一致的间距,也许我的Fonts软件运气不好。

总之,如果你正在考虑匆忙抛弃文本的替代技术,我会把地狱脱离,或者你可能会像我一样令人难过的惊喜。

广告

我们提供专业人士 tesking 312-50. 网络设计师和开发人员的培训。下载 tesking 642-359. 视频和 tesking 642-681. 学习指南,以了解您的速度。

25 thoughts on “CSS3 @ Font-Face并不像您认为的那样准备好

  1. @ Font-Face是一个CSS功能,它不是HTML5的一部分。

    你用什么字体测试? .tf或.ttf?那些字体来自哪里?如果你’使用从MAC中获取的字体应该*不是*在公共服务器上使用,许可证不允许此操作。暗示或缺乏提示将影响字体渲染的方式,*特别是*在Windows XP上禁用ClearType。

  2. “IE旁边的每个主要浏览器”

    IE已经有一段时间@ Font-Face。它只是’T支持标准字体。没有biggie。只是另一个CSS黑客。

  3. @John我正在使用OTF,在默认的XP环境中,我最大的问题来自Safari,一切都是丑陋的,

    我使用的大多数字体是免费的,但我为此示例使用了已知的字体。

  4. @ zizric; Safari没有’它在窗户上工作非常好,它’S以多种方式瘫痪。据我所知,OS X上的Safari与@ font-face没有问题。

  5. 一种方法I.’一直在使用的是使用@ Font-Face属性,这些属性涵盖Safari和FF 3.5,并使用条件注释使用CUFON替换所有版本的IE版本的字体。

  6. 不要听起来像恨,但我有一种感觉,@ Font-Face将成为未来十年的闪光。有些人会漂亮地使用它,但我的感觉大部分会滥用它,这将导致这一天闪现的相同耻辱。

  7. 当我第一次测试@ font-face时,我的结论几乎是相同的,一些字体真的很奇怪。

    一般来说,在我的情况下,超过20px的标题很好,浏览器之间的差异很小

  8. 刚刚开始在网站上搞乱@ Font-Face。您这里的图像显然都在XP上拍摄,我发现是一个问题。 Mac上的Safari显示了我的字体,但Windows XP是另一个故事。 Firefox使用Windows默认ClearType,除非FONT为其制造,使得行程重量看起来小于16pt的贫血尺寸,或者是因为它而制造的字体’在小尺寸时,既比oS X好,又比OS X好。 Windows版Safari使用它’S自己的字体渲染,类似于OS X’渲染引擎,但它不够不同’看起来很对。不确定歌剧,但它似乎使用它’s own rendering too.

  9. Windows上的Safari 4为用户提供了多种选项(首选项> Appearance > Font Smoothing). “Windows Standard” means “使用Windows系统默认值”在Windows XP的情况下,没有Cleartype,没有亚像素抗锯齿,去监狱,直接进入监狱。在引擎盖下,Safari使用GDI“Windows Standard”设置了Mac OS X Coregraphics库的Windows端口否则。 Firefox 3.5和Opera 10 Beta 2将呈现GDI。

    如果只有纪录片开放来源,世界将成为一个远的地方…

  10. 这与@ Font-Face真的无关,但与Windows上的字体渲染系统有关。 Windows上的GDI字体渲染器通过不同的方式处理TrueType和PostScript字体(与OS X或Linux不同’统一,这个问题刚刚呢’T存在于这些平台上),不幸的是,一种方法(TrueType)可以进行子像素和灰度抗锯齿,另一个(PostScript)只能做灰度。

    您可以通过在系统上安装正常的PostScript字体并在WordPad中使用它,即使在Windows 7中使用ClearType启用的Windows 7,它们通过灰度抗锯齿呈现。

    幸运的是微软已经做了几个新的字体渲染API’S,其中既不是这个问题,WPF字体渲染器和新的DirectWrite渲染器(在Windows 7中并被回到Vista我听到)处理TrueType和PostScript字体完全相同,他们可以做暗示,子像素AA,对于字体,无论底层格式如何。它’■同时比GDI更高的质量渲染(它可以在x和y方向上抵抗别名,GDI只有x方向,所以字符的顶部和底部看起来像素,大O,O和0个字符最多显示它)

  11. 我的大学向我展示了在Windows上的Photoshop上,Microsoft自己的字体看起来很糟糕,但在Photoshop中,您只需应用‘sharpen’-Filter / -effect,问题消失了。在现代浏览器中如何使用CSS-/ SVG效果来修复字体?那会工作吗?

  12. CSS中没有这样的东西,我不是真的svg savvy,所以我可以’肯定会说。但亚历克斯描述了这个问题,我认为当Windows 7有重大份额时,这个问题会消失。

  13. 还有其他人看到字体松鼠吗? http://www.fontsquirrel.com/

    他们有免费字体在套件中可直接使用,这将在所有现代浏览器上非常好。大多数都在IE6上工作。如果您想查看可以用法律字体完成的内容,请查看此操作。

  14. 不是真的,即实现的字体面,但是每个浏览器的当前实现都是CSS3规范的一部分。

  15. 这不是@ font-face的问题。 TrueType字体需要暗示,使用ClearType渲染看起来很好—看起来很好,灰度渲染他们需要很多暗示。 PostScript字体在两个情况下看起来。你没有的原因’注意到这一点之前是核心Webfonts都广泛暗示。

评论被关闭。