php外包、微信开发、app开发尽在蓝普!全国客服:400 8789 863

美妙字体就用@font-face

在Firefox 3.0里面针对印刷字体的渲染做了很多改进,这样就允许在字体渲染方面实现包括字距调整、字体大小混排之类的效果,不过设计中还是要受到字体本身的限制。在Firefox 3.5中取消了这种限制,他实现了CSS的@font-face规则,允许大家如同使用脚本和图片一样把TrueType和OpenType的字体文件连接到HTML文件中。Safari从3.1开始也支持了这一规则,Opera也已经发布通告准备在Opera 10里面支持。

使用@font-face来引用字体资源非常直观。在CSS的格式表中,每条@font-face规则都定义了使用的字体家族名字、需要读取的字体资源,以及其他的一些格式特征,例如是否粗体是否斜体等。Firefox 3.5仅在需要的时候下载这些字体文件。

/* Graublau Sans Web (www.fonts.info) */
{
font-family: Graublau Sans Web;
src: url(GraublauWeb.otf) format(“opentype”);
}
body {
font-family: Graublau Sans Web, Lucida Grande, sans-serif;
}

支持@font-face的浏览器会使用Graublau Sans Web来渲染文字,而不支持这一规则的浏览器则会使用Lucida Grande或者缺省的sans-serif来渲染文字。在这里查看效果:

来个复杂点的

现在大部分字体支持四种样式:正常、粗体、斜体和粗斜体。如果要分别支持这四种样式,需要定义好相应的font-weight和font-style描述符。如果没有对这些属性进行设定的话,那就是对应为正常的字体描述:

/* Gentium by SIL International */
/* http://scripts.sil.org/gentium */
@font-face {
font-family: Gentium;
src: url(Gentium.ttf);
/* font-weight, font-style ==> default to normal */
}
@font-face {
font-family: Gentium;
src: url(GentiumItalic.ttf);
font-style: italic;
}
body { font-family: Gentium, Times New Roman, serif; }

这里可以查看具体效果,下面的截图也显示了使用这种字体来渲染的效果:

@font-face规则很容易被忽视的一个特性是,你可以制作的字体家族不仅仅提供正常和粗体样式──在一个字体家族中您可以定义达到9种字体粗细。在Windows也如此,因为Windows底层对字体的限制还是很严格的,基本就只是支持正常和粗体。M+字体项目是一个日文的开源项目,他可以提供7种粗细的样式。大家可以看看下面这个例子,也可以查看这里:

在某些情况下,设计师更希望用户本地已经安装了字体而只有在这些样式不被支持的时候才去下载不同的字面风格。针对这个问题,我们可以在@font-face规则中的src使用local()。浏览器会在src描述中遍历查找所有字体直到成功读取到。

/* MgOpen Moderna */
/* http://www.zvr.gr/typo/mgopen/index */
@font-face {
font-family: MyHelvetica;
src: local(“Helvetica Neue”),
local(“HelveticaNeue”),
url(MgOpenModernaRegular.ttf);
}
@font-face {
font-family: MyHelvetica;
src: local(“Helvetica Neue Bold”),
local(“HelveticaNeue-Bold”),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
body { font-family: MyHelvetica, sans-serif; }

下面的截图从上到下依次显示了在Mac OS X、Windows和Linux上的效果,在这里可以看到实际的渲染页面:

字体Helvetica Neue在大部分Mac OS X系统中都有,但是在Windows和Linux基本都没有安装。所以,上面的例子在Mac OS X系统上渲染的时候,本地的Helvetica Neue字面风格会被使用而不需要下载。在Windows和Linux上读取本地的字体文件失败,作为替代字体的MgOpen Moderna被下载到本地并用来渲染文字。MgOpen Moderna被设计为Helvetica的替代字体,所以他的渲染效果跟Helvetica Neue基本一致。

用来制定特定字面风格的名字通常是该字体的全称,通常来说是家族名字+风格名字(例如,Helvetica Bold)。在Mac OS X上,名字信息可以在字体风格的信息面板中查到。在FontBook中选中某个字体然后选择“显示字体信息”:

在Linux上也有类似的工具。在Windows上,可以从微软那里下载到一个免费的工具叫做字体属性扩展来查看这些名字信息。安装了这个工具之后,属性面板中会显示出字体的相关信息。

Safari在Mac OS X上只支持PostScript名字查找方式,所以在Mac OS X上,PostScript的名字也被支持。在Windows上,OpenType的PS字体(通常扩展名为.otf)名字全称同PostScript的名字是相同的。所以,针对这些字体,我们建议设计师包括全部名字和他的PostScript名字以便兼容各个平台。

跨站点使用字体

缺省的,Firefox 3.5不允许跨站点使用字体,不过对于有些网站可能还是需要这种能力的,可以通过设定访问控制HTTP头部信息来开启。在传输字体文件的协议中加入控制头部信息,如下:

# example Apache .htaccess file to add access control header


Header set Access-Control-Allow-Origin “*”

字体版权信息

在使用字体的时候一定要确认您是有权利在网络中使用该字体。很多免费字体其实是想吸引大家去购买正式字体所以彩发放的,因此可能在版权中会有声明禁止再次分发,这时候就不能在网站中使用该字体,所以即便是免费字体,大家也要明确查看版权信息。“那么我能用我本地的字体发布到网站上吗?”现在,还不行。大部分同计算机操作系统发布的字体通常限定使用在桌面应用中,所以在超过这个范围外的使用通常是不被允许的。

通常,影像和印刷行业的市场大概估价20亿美元,而互联网字体还是零美元,发展空间是相当大的!

在IE中使用字体链接

在IE中同样可以使用字体链接,不过仅仅能使用似有的EOT字体格式的。制作EOT格式字体只能使用微软的WEFT工具,而且只能转换TrueType和OpenType TT格式的字体,OpenType PS(.otf)格式的则不行。

IE浏览器仅识别font-family和src描述符,所以一个字体家族只能定义一种字面风格。而且IE浏览器无法识别format()提示并会忽略掉带有该提示的整条规则声明,因此可以做一些跨平台的工作:

/* Font definition for Internet Explorer */
/* (*must* be first) */
@font-face {
font-family: Gentium;
src: url(Gentium.eot) /* can’t use format() */;
}
/* Font definition for other browsers */
@font-face {
font-family: Gentium;
src: url(Gentium.ttf) format(“opentype”);
}

将来的工作

Firefox 3.5中,font-stretch和 unicode-range描述符还没有得到支持。SVG文档中定义的字体也还没有得到支持。这些都将在将来的发布中得到支持。跟以往一样,欢迎提交代码补丁!

更多资源

文档

* MDC @font-face documentation
* CSS2 Fonts specification
* CSS3 Fonts draft
* Cross-Origin Resource Sharing Working Draft

示例

* CSS @ Ten: The Next Big Thing
* Example layout using Graublau Sans
* Examples of Interesting Web Typography
* The Elements of Typographic Style Applied to the Web

字体资源

* Font Squirrel
* 10 Great Free Fonts for @font-face
* Web-based font subsetting tool
* 40 Excellent Free Fonts by Smashing Magazine
* FontTools/TTX – Python scripts for displaying font data

字体政策

* Microsoft’s Bill Hill about Font Embedding
* Microsoft’s Chris Wilson about direct linking to TrueType fonts
* Robert O’Callahan’s blog post on web font formats
* Discussion of font formats at W3C TPAC meeting
* Mark Pilgrim’s post critical of font foundries
* David Baron’s thoughts about downloadable font formats

标签:, , , ,

转载请注明来源蓝普网络并以链接形式标明本文地址
本文链接: http://www.wbphp.cn/html/y11/1902.html

作者:氷君 | 日期:2009-11-07 | 分类:html | 评论:0 条 | 浏览:63


上一篇:
下一篇:

相关文章

    • 暂无相关文章

发表评论

*

* 以便邮件回复


给我汇款 | 合作流程 | 看看我们 | 加入我们 Copyright 2008-2016 php外包与洛阳php培训服务商. Some Rights Reserved. 豫ICP备12025288号-1