• 全部
  • 字体
  • 字体家族
  • 字体公司
  • 字体设计师
  • 字体样张
  • 资讯
  • 帮助
字客网>资讯>详情

简化的Web字体

时间:2010-08-14 00:56:00| 业界|浏览:289|来源:小伟的布拉格|作者:wbpluto
导语设计与排版是相辅相成的。但每当我想在我的网页上使用特别的字体时,总是让人十分头痛,很难实现。因为这个原因,许多网页设计师放弃使用这种方式,通过将文字处理为背景图片来解决这个问题。但这样带来了另一些问题,包括可访问性……

设计与排版是相辅相成的。但每当我想在我的网页上使用特别的字体时,总是让人十分头痛,很难实现。因为这个原因,许多网页设计师放弃使用这种方式,通过将文字处理为背景图片来解决这个问题。但这样带来了另一些问题,包括可访问性(注:针对盲人等残障人士,例如他们需要文字朗读功能)及页面内容警惕性问题(图片不如文字那样具有可调整性),有时候有必要对页面渲染进行像素级的控制,但另外一些时候,我们希望由浏览器和用户来控制文字的排列和显示。

浏览器支持

在本文中,我主要介绍过去和现在浏览器对Web字体的支持情况,使用的字体类型及如何在页面标记中使用它们。

Microsoft在1995年就已经在首个Internet Explorer版本中通过FONT FACE标记来支持嵌入字体,随后的3、4、5几个版本又增加了CSS 支持。不过,这种技术需要用户的系统中已经安装有要使用的字体。最后,Microsoft提供了一个WEFT工具,让大家可以将字体嵌入到自己的网页中,用户无需实现安装该字体就可以正确浏览该页面。

Internet Explorer 所支持的字体格式是 Embedded Open Type (EOT) 文件格式,这种格式还没有被其他浏览器支持(注:最新版本的Chrome浏览器已经支持)。经我测试的其它所有浏览器(包括最新版本的Firefox、Opera和Safari)都支持TrueType (TTF)字体格式。

转换字体

在Windows中使用的大多数字体都是TrueType字体。为了使我们的(特殊)字体能在Internet Explorer中使用,他们必须变成EOT格式。

Microsoft 早前就提供了一个Web Embedding Fonts Tool (WEFT)工具,帮助网页开发人员生成EOT。它具有完全图形化的界面,能够扫描并识别网站中使用该字体的所有字符,然后只把这些字符编码并打包到EOT字体格式中,随后就可以上传到服务器上使用了。我使用过这款软件,感觉用起来不方便不直观,而且并没有处理到我是用的字体。

除此之外,我还发现了另外一款开源的命令行工具ttf2eot(采用GNU GPL v2许可),并有Windows版本提供下载。该工具最初为Unix系统而开发,因此用法上和普通的Windows程序不太一样,它会将字体转换为输入流,然后写入到输出流中,也就是说,需要在Windows命令提示符中运行类似下方的命令:

TTF2EOT < MyFont.ttf > MyFont.eot

使用CSS @font-face

现在,需要使用的字体同时准备好了被浏览器所使用的两种格式,需要在网页中引用该字体,然后在标记中调用。

要让所有浏览器都能正确显示这种嵌入字体,其 CSS 代码非常简单。只需按正确顺序排列 @font-face 声明,这样所有浏览器就都可以调用合适的字体信息了:

<style type="text/css">
    @font-face{font-family:"Alien";src:url(ElementalEnd.eot);}
    @font-face{font-family:"Alien";src:url(ElementalEnd.ttf);}
</style>

声明 font-face 之后,就可以像其他系统内置字体一样使用了:

<html>
<head>
<style type="text/css">
    h1 {font-family:"Alien"}
</style>
</head>
<body>
    <h1>Fontke.com<H1>
</body>
</html>

就是这样简单!准备好这种字体的两种格式,然后以正确的顺序引用它们,最后就可以在网页中使用它了。

0
更多简化的Web字体敬请关注字客网!
相关字体公司
简化的Web字体 网友点评
游客:文明上网,理性发言。 看不清?换一张
简化的Web字体 最新评论
暂无相关评论
精彩点评