网页制作自定义网页字体

发布日期:2015-08-23 19:38:53
多年来我们一直被迫使用一组单调乏味的 Web 安全字体。当北京网页设计中确实需要一些优雅的字体时, 我们通常都是使用图片来替代, 并对元素使用 text-indent 规则将实际的
文本移出视口范围。
曾有一些稍微高级点的备选方案,来为网页增加更加个性的字体效果。sIFR和 Cufón都使用 Flash和 JavaScript来重建文本元素,然后使用自定义字体来显示内容。但是在响应式设计中,我们力求精简、语义和内容优先,所以多余的图片和臃肿的代码应该尽可能避免。幸好,CSS3提供了一种自定义网页字体的方法,用它可以描绘美丽的新时代。

@font-face 规则
@font-face 规则在 CSS2中已经存在(但随后在 CSS 2.1中被删除) 。IE 4甚至对其提
供了部分支持(真的,不骗你) !那现在都 CSS3了,怎么还提它呢?
因为它又回来了! @font-face 已经被重新引入 CSS3 字体模块。过去在网页中使用自定义字体一直很麻烦,直到最近才开始有了一些真正可行的网页字体解决方案。但浏览器厂商对不同的字体格式和具体实现仍在争论。如Embedded OpenType(EOT)字体是 Internet Explorer的首选格式(其他浏览器都不支持) ,其他浏览器更钟爱常见的 TrueType格式(TTF) ,还有 Scalable Vector Graphics (SVG)以及 Web Open Font Format (WOFF)。使用 @font-face 为网页设定字体时,可谓喜忧参半。
我们先说忧吧……
在某一个通用的字体格式一统天下之前,我们需要为同样的字体提供多种格式以兼容不
同的浏览器。和竞争激烈的视频格式一样,必须等到某种字体格式明显胜出的时候,才
能删除对其他方案的支持。
喜的是,现在给每种浏览器设置对应的自定义字体都很简单。我们来试试!

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计