用我喜欢的字体(Cufon)

优雅的设计经常包含一些特殊的字体,而这些字体并不存在于用户的字体库中,我们并不能奢求每一个访客都是设计师。  :-)

虽然CSS3标准给我们带来了@font-face属性,但他也仅仅限于使用在“Gecko 1.9.1,Applies to Firefox 3.5, SeaMonkey 2, and Thunderbird 3 and later

不是Type2呢?不是Firefox3.5呢?显然这并不是一个现实的解决方案,毕竟我们有90%以上的用户在使用IE。

为了解决这个问题,我们使用了sIFR框架,但是这玩意一点也不好,首先是大,其次是慢,而Cufon可以很好的代替它。

什么是 Cufon 呢?Cufon 是一个实现在网页中对文字字体进行渲染的纯 JavaScript 开源类库。

使用Cufon非常简单,只需要在页面中引入Cufon得核心文件,然后在http://cufon.shoqolate.com/generate/ 将你的字体转换为JS字体文件并引用到页面中。

接下来,就可以使用相应的Cufon API对页面中的字体进行渲染了。

那么Cufon是如何对页面字体进行渲染的呢? 当然是VML、Canvas、SVG,因为网上已经有了相关的文章,所以我就不复制粘贴了。如果你有兴趣,可以看这里了解详细。

最后,因为Cufon是将字体以JSON格式进行编码,所以如果字体是中文的话,这个JS库会增大数倍,使用的时候一定要谨慎。

参考资料:
http://www.ibm.com/developerworks/cn/web/0911_zhuzh_cufon/
http://www.mikeindustries.com/blog/sifr/
https://developer.mozilla.org/index.php?title=en/CSS/%40font-face
http://wiki.github.com/sorccu/cufon/api

原文链接(316 views)|暂无评论(赶紧抢沙发)

Firefox的新属性 pointer-events

Firefox 3.6 增加了对pointer-events的支持。Opera和safari都可以对svg的pointer-events属性做出支持,这次Firefox把他扩展到了常见的HTML元素上。

pointer-events的语法为
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

其中auto和none可针对所有的元素使用,其它的值只针对SVG。
(as of Firefox 3.6, only the values auto and none apply to all elements. The other values only apply to SVG and behave like auto in other XML and HTML content.)

当使用none的时候,当前节点下的所有子节点不接受event事件。反之则接受。

例如当pointer-events为none时:

#test {
    pointer-events:none;
  }
 
#test:hover {
    background: red;
}

鼠标移动到p节点上时将没有不会触发任何事件。

值为auto时:pointer-events/auto.htm

值为none时:pointer-events/none.htm

不过针对HTML元素是Firefox自己创造的新玩意。 :)

参考:
http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty
http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/
https://developer.mozilla.org/en/CSS/pointer-events

原文链接(67 views)|暂无评论(赶紧抢沙发)