将商业字体嵌入网站

时间:2009-10-22 22:51:40

标签: fonts sifr embedded-resource cufon typeface.js

女士们,先生们,晚上好!

搜索跨浏览器解决方案以嵌入商业字体 像HelveticaNeue或Univers等我发现了一些很有前景的方法。

首先,我将在这里征集所有已发现,现代且易于使用的方法:

  1. sIFR的
  2. 的Cufón
  3. typeface.js
  4. CSS3 font-face
  5. sIFR众所周知,有点容易实现,但据我所知,并非如此 很简单,只有Javascript的兄弟姐妹,Cufón和typface.js。

    Cufón吸引了我的注意力,因为它提升了一点点 比typeface.js,并创建更小的字体文件。显然地 没有合法的方法可以将它与任何商业字体一起使用, 这是不允许嵌入这种解决方案的。

    对于typeface.js,同样的情况适用,只是在 事实上,它甚至无法使用许可证转换字体 禁止将其嵌入网站。

    最后但并非最不重要的是,有一个名为font-face的'新'CSS属性, 这非常容易使用,但对于我们喜爱的IE,我们需要转换 将文件转换为EOT(Embedable OpenType)文件。

    因此IE需要特殊的CSS声明才能实现 在浏览器中使用这些字体。

    现在的问题是:

    在网站上使用此类商业字体的最佳方法是什么? 从现在开始使用免费字体与Cufón或将所有使用的字体转换为EOT 文件,并与font-face一起使用?

    感谢您提出充分论证的答案,我很感激!

2 个答案:

答案 0 :(得分:3)

经过几个小时的研究和测试后,我发现了一个非常好的 将特殊字体嵌入网站的好方法。

通过CSS3使用方法font-face是最好的解决方案。

你要为IE做的唯一开销就是转换 你的Truetype字体(不幸的是OTF无效。)进入 EOT文件。微软WEFT是一个解决方案,但最好的方式 要做到这一点,就是使用开源工具'ttf2eot',其中 可在此处找到:http://code.google.com/p/ttf2eot/

基于网络的前端可以在Google上搜索“kirsle wizards”。

唯一需要注意的是浏览器支持......

IE4,5,6,7,8使用EOT文件,而TTF仅支持 由Firefox版本提供> = 3.1。关于Safari和Opera 我不确定,但Safari 4也适用于我,而Opera 10也适用。

(因此,我认为Chrome不支持它,因为使用了 一个较旧的webkit版本?!)

根据我们机构的客户跟踪统计数据“仅限” 15%到20%的访问者使用不兼容的浏览器 Firefox 2.0或3.0,较旧的Safari或Opera版本或Chrome。

答案 1 :(得分:0)

此页面的底部有关于如何使用直接HTML和CSS执行此操作的信息: http://www.albinoblacksheep.com/text/font