一种提高用户体验的字体大小CSS写法

发表于:2010/07/22, 属于分类: 网站建设, 本文作者: admin

平常在设计网站写CSS的时候,习惯性地会在body加入一行font-size:12px;即定义一个全局字体大小为12像素。虽然像素也是相对尺寸单位,但只是相对于屏幕的分辨率 ,如果屏幕的分辨率一定,你却感到字太小,阅读有困难,在非标准浏览器中就无能为力了,因此,如果把单位改成em,那么就可以用CTRL+鼠标滚动把字放大,或者用菜单上的查看>文字大小来改变字的大小。

如何去实现这种方式?有两种方法:

1.将body里字体尺寸设为75%,如果在body里没有CSS设定,那么浏览器默认的大小是16px,那么字体尺寸=16px*75%=12px,1em相当于12px.
body{
font-size: 75%;
}

h2{
fong-size: 1.5em;/* h2字的大小相当于18px */
}

2.将body标签里将字体尺寸设为62.5%, 则字体尺寸=16px*62.5%=10px,这时你能用em方便地设大小了,比如你需要用12px,只要设1.2em。
body{
font-size: 62.5%;
}
h1{
fong-size: 1.4em;/* h1字的大小相当于14px */
}

对比以上两种方法,第二种更为简洁易用。从这简单的CSS字体设定,对提高用户体验是非常重要的,也是每一个网页设计师必须要理解的地方之一。

发表评论