网页的视觉效果无非取决于文字和图像,而文字又占据着举足轻重的主导地位。所以UI设计师在设计效果图时都要花不少心思在字体运用上,首先是根据网站风格和面向对象来选择合适的字体,其次要根据内容重要性、板块主次性来运用粗、斜体、大小字号来表达视觉层次感。

显然,UI设计注重于美观效果,这是无可厚非的;但是到了网页美工切图时,问题就不这么单一了,比如说效果图中的字体是不是大众电脑系统的通用字体等,是需要考虑些实用性的。下面就说说我所遇到的两个问题及其解决方案和可选性:

一、当网页运用字号小于12px的字体时,部分浏览器表现固执,默认都只显示为12px的字号,譬如谷歌浏览器。

通常情况,尤其是中文网站,我们最小都是用的12px的字号,但是一些英文网站为了达到一定效果,一般都会需要些小字号字体来映衬,不知道大家遇到过没有,反正我是遇到过,也曾特别不理解,因为在谷歌浏览器测试时发现,我设为8px字号的字体俨然就是12px的大小,很不服气地又试了试,终于发现,凡是低于12px的字号,谷歌浏览器统统默认显示为12px大小,唉,感叹谷歌浏览器的开发者在用户体验上做的如此细微。可是个别情况还是得定当别论,请教了高手,问题解决,只需在样式里添加这样一个针对谷歌浏览器的专有属性设置:-webkit-text-size-adjust:none;真的是解铃还须系铃人啊,既然你谷歌做了默认设置,那咱就想法改变这个设置啦。

二、当网页运用字体不是大众电脑系统的通用字体时,咱改如何实现呢?

好在CSS确实够强大,咱可以尽情的调用你所拥有的任何字体文件,看具体方法:

@font-face { font-family : name(字体名称) ; src : url (绝对或相对 url 地址指定OpenType字体文件) ; sRulesZ(样式表定义) }
但是试了后发现,兼容方面还不合格,继续努力发现问题出在字体文件的格式上:

* .TTF或.OTF,适用于Firefox 3.5、Safari、Opera
* .EOT,适用于Internet Explorer 4.0+
* .SVG,适用于Chrome、IPhone

因此样式要这么来写:(以HeiTi TC字体为例)

@font-face {

font-family:”HeiTi TC”;

src: url(‘HeiTi TC.eot’);

src: url(‘ HeiTi TC.eot?#iefix’) format(’embedded-opentype’),

url(‘ HeiTi TC ‘) format(‘woff’),

url(‘ HeiTi TC.ttf’) format(‘truetype’),

url(‘ HeiTi TC.svg#webfont34M5alKg’) format(‘svg’);

}

自己提供字体的各种版本放在css样式表所在文件夹中,浏览器在加载网页时会自动下载相应字体文件。

在这同时我还发现了一个很好的网站,谷歌的webfonts(搜索下就出来了),这是谷歌开发的一个在线字体运用网站,里面收纳了不少英文字体,所以如果是需要英文字体,可以先在这上面搜搜看,如果有就直接由google生成相应code,这样网站在加载时会直接调用这个在线字体,很方便。

问题如是解决,但还是不得不说明一下,这样加载外部字体,会比较影响页面的加载速度,直说就是在美观上加分了,但在用户体验上大大折扣了,所以还是建议选用通用字体来替代。