将商业字体嵌入网站

发布于 2024-08-08 14:10:23 字数 761 浏览 9 评论 0原文

女士们先生们晚上好!

寻找跨浏览器解决方案来嵌入商业字体 像 HelveticaNeue 或 Univers 等。我发现了一些有前途的方法。

首先,我将在这里列出所有已找到的、现代的且易于使用的方法:

  1. sIFR
  2. Cufón
  3. typeface.js
  4. CSS3 font-face

sIFR 众所周知,并且很容易实现,但据我所知,并不像 很简单,因为它是纯 Javascript 的兄弟姐妹,Cufón 和typface.js。

Cufón 引起了我的注意,因为它渲染得更好一些 比 typeface.js 更小,并创建更小的字体文件。显然 没有合法的方法可以将它与任何商业字体一起使用, 不允许嵌入到此类解决方案中。

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

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

因此 IE 需要特殊的 CSS 声明,以便能够 在浏览器中使用这些字体。

现在的问题是:

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

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

Good evening ladies and gentlemen!

Searching for a cross-browser solution to embed commercial fonts
like HelveticaNeue or Univers etc. I found some promising approaches.

First of all I will enlist all found, modern and easy to use approaches here:

  1. sIFR
  2. Cufón
  3. typeface.js
  4. CSS3 font-face

sIFR is well known and kinda easy to implement, but as I know, not as
easy as it's Javascript-only siblings, Cufón and typface.js.

Cufón has caught my attention, as it renders a little bit better
than typeface.js, and creates smaller sized font-files. Apparently
there is no legal way to use it with any commercial font out there,
which is disallowed to be embedded into this kind of solution.

For typeface.js the same situation applies, just differing in the
fact, that it's not even able to convert fonts with a license, which
forbids to embed it into websites.

Last but not least there is this 'new' CSS property, called font-face,
which is incredibly easy to use, but for our loved IE we need to convert
the files into EOT (Embedable OpenType) files.

Therefore special CSS declarations are needed for IE, to be able to
use these fonts inside the browser.

The question is now:

What is the best approach to use such commercial fonts on websites?
Use free fonts only from now on with Cufón or convert all used fonts into EOT
files, and use them together with font-face?

Thanks for your well argumented answers, I appreciate it!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

烟雨凡馨 2024-08-15 14:10:23

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

恕我直言,使用 CSS3 font-face 的方法是最好的解决方案。

您必须为 IE 做的唯一开销就是转换
您的 Truetype 字体(不幸的是 OTF 不起作用。)
EOT 文件。 Microsoft 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。

Finally after some hours research and testing I found a VERY
nice solution for embedding special fonts into websites.

Using the approach via CSS3 font-face is imho the best solution.

The only overhead-thing you have to do for IE, is to convert
your Truetype fonts (Unfortunately OTF is not working.) into
EOT files. Microsoft WEFT is a solution, but the BEST way
to do this, is to use the open-sourced tool 'ttf2eot', which
can be found here: http://code.google.com/p/ttf2eot/

A web-based frontend can be found searching 'kirsle wizards' on Google.

The only thing to notice is browser support...

IE4,5,6,7,8 use the EOT files, while TTF support is only
provided by Firefox versions >= 3.1. About Safari and Opera
I'm not sure, but Safari 4 worked for me, and Opera 10 too.

(So Chrome doesn't support it I guess, due to usage of
an older webkit version?!)

Based on our agency's clients' tracking statistics "only"
15 to 20% of their visitors use incompatible browsers like
Firefox 2.0 or 3.0, older Safari or Opera versions or Chrome.

最佳男配角 2024-08-15 14:10:23

本页底部包含有关如何使用直接 HTML 和 CSS 进行操作的信息:
http://www.albinoblacksheep.com/text/font

The bottom of this page has info on how to do it using straight HTML and CSS:
http://www.albinoblacksheep.com/text/font

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文