4
Apr 12

用CSS改善网页字体显示效果

Kafan论坛Opera版有个帖子《用CSS让网页字体显示阴影》,作者技术很好,但是对于“美”这么回事,缺了一点想象力。

按照作者的写法:

*{
font-family:"WenQuanYi Zen Hei","文泉驿正黑",monospace;font-weight:bold;text-shadow:1px 1px 2px #909090 !important;
}

先定义强制使用字体,接着三个参数分别设置字体加粗,偏移并显示阴影。看图:

不必什么专业知识,明眼人都能看出字形加粗过度,阴影颜色太黑,导致网页内容糊成一团。切阴影太重看久了会眼晕。

该帖四楼,有位高手贴出另一种写法:

body{text-shadow:0em 0em 0.04em #909090 !important}

基本上照搬Mac OSX Font Rendering的样式。不多说,看图:

效果已改善许多,尤其对于Windows系统下没有使用字体渲染或仅仅使用ClearType的用户而言。可是对Linux用户,这和Xubuntu下的默认显示效果,有什么太大差别么?看图比较,默认的XUbuntu显示效果,不够平滑,更锐利:

我对这个CSS样式略微做了修改,使其效果更好,字体清晰锐利,对眼睛和善。写法如下:

{text-shadow:0.1em 0.1em 0.5em #bcbcbc !important;}

我把该样式应用于Firefox的stylish扩展。Opera下可自定义强制使用字体,写法为:

*{font-family: "宋体","Simsun";text-shadow:0.1em 0.1em 0.5em #bcbcbc !important;}

font-family可以定义多种字体,我当前使用FuturaXHei,不废话,看图:

ps:本博客也使用了这个CSS样式,但似乎载入页面略有延迟。


30
Mar 12

面朝大海,双腿叉开


25
Mar 12

理想的博客