css 事件

html-css031

css 事件,第1张

.item{

margin:0 0

padding:1 1

background:#ECEFE9

font-family:tohoma

font-size:12

event:e­xpression(

onmouseover=function(){

style.color="#FFFFFF"

style.background="#9C0A24"

},

onmouseout=function(){

style.color="#004A9F"

style.background="#ECEFE9"

}

)

}

Vista推出了新的中文字体:微软雅黑

雅黑带来了什么

从本文所附的雅黑网页显示效果示意图可以看出雅黑的几个重点设计理念:

1.单独设计的粗体。 以往宋体的粗体都是通过内嵌点阵或者字体引擎渲染的,效果不是很好。粗体的单独设计意味着另外设计一套字体,所有的时间成本和人力成本翻倍,造价也会翻倍,但是显示效果也会非常好。再考虑到繁体中文和日文韩文都如此处理,微软这次真的下了血本了。

2.品质优异的斜体。在Windows 上第一次看到如此清晰的中文斜体,真的有点令人感动。虽然是 14px ,但宋体的斜体已经显得支离破碎了。

3.更清晰的小号字显示。在以往, 12px 是宋体能显示的极限。比这小的字号会因为没有内嵌点阵而变得模糊。而从微软雅黑的字范来看, 11px 的显示非常优秀,10px 的字基本可以辨认,9px 以下,对于汉字的正常显示,已经是不可能的任务了,平常也不会作为正常的屏幕使用字号,但这个极限字号的测试是一个有参考价值的项目。我们可以看到,雅黑在这种情况下仍然还有大约一半左右的字符可以识别出来。

4.对于最常用的字号 , 如12px和14px ,雅黑的显示非常清晰优美,中英文搭配和谐。同时,和宋体相比,雅黑的字形不是正方形的,而是稍显扁宽,字间距小,使默认的行间距更为明晰,同时使雅黑的字心更为饱满,在同样的字号下,单字面积就显得更大,更容易识别,阅读起来也更舒服。

中文显示的新体验

作为微软中文解决方案的一个重要核心,微软将在 IE7 、 Office 2007以及Vista中全面启用雅黑作为默认的界面显示和正文阅读字体,替代长期以来使用的宋体(中文)+ Tohoma (英文)点阵字方案。这将带来怎样的变化?

首先,未来的软件界面将更灵活,更人性化。在解决了字体平滑缩放之后,从 Windows本身到各个应用软件,它们的界面字体对比现在将变得更大、更平滑和清晰。用户将可以自己灵活定制Windows和各个应用软件的字体大小,以适应不同场合和不同视力的需要。而软件开发人员和UI设计师需要考虑的是在字体发生变化之后的软件界面还能保持动态的完整和美观,避免在字体变大之后变得支离破碎无法辨识。

其次,雅黑对于互联网,将会有更深远的影响。今后的网页设计会更体贴而人性化,用户将不再需要忍受网页上的小字体的困扰,网页的设计风格将会更简洁而便于阅读。

比如,用户将可以自己选择网页的显示字体的大小。用户会发觉原来大字体下面的网页文字也可以如此优美,不管大字号还是小字号,文本的显示比图片还要平滑清晰。屏幕上的阅读将变得更为轻松。长期以来网页设计人员都喜欢使用css来锁定文字的字号大小,以避免不好看的大字体破坏整个页面的美观。随着ClearType中文字体的推广应用,这种做法会逐渐消失。

另外,网页的风格将会越来越趋于简洁和明快,便于阅读。那些整个版面密密麻麻花里胡哨风格的页面将会逐渐不再流行。因为这样复杂的界面在字体变大以后很容易就被破坏。而网页的界面结构越简洁,就越可以自动缩放和适应这种动态的变化。现在的Web2.0网站已经越来越明显地体现简洁明快的趋势,在一些牛人的Blog和相册站点上,现在已经可以自由缩放,同时保持版面美观一致。

此外,除了不再锁定字号,css的写法也会有新的变化。例如以前用习惯使用固定像素16-20px为单位来确定行间距的设计,在字体放大以后就会挤在一起而无法阅读。因此以后将流行用百分比或者em来确定行距,以自动适应字体的缩放。最后,以往很多粗体的大标题和斜体,由于字体的显示不佳而被迫做成图片,这种局面也将得到全面的改变,大多数常用的字体效果都可以直接在网页上通过css 来更灵活实现。

雅黑注定要为将来的Windows界面和网页浏览带来意义深远的革命。所以,不管你是作为一个软件开发人员、一个软件UI设计师,还是一个网页设计师,或者是一个最普通的网民,一个Windows的使用者,都无法忽视它。让我们期待这个全新的时代赶快到来吧。

下载地址:http://so.xunlei.com/search?search=%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91%E5%AD%97%E4%BD%93&suffix=&restype=-1&id=1