第一范文网 - 专业文章范例文档资料分享平台

CSS样式中字体大小

来源:用户分享 时间:2025/7/23 17:37:18 本文由loading 分享 下载这篇文档手机版
说明:文章内容仅供预览,部分内容可能不全,需要完整文档或者需要复制内容,请下载word后使用。下载word有问题请添加微信号:xxxxxxx或QQ:xxxxxx 处理(尽可能给您提供完整文档),感谢您的支持与谅解。

CSS样式中字体大小,建议font-size使用em

在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸,中文情况下一般为12px,而其实这样以来在通过IE顶部菜单中的“察看-文字大小”设置已无任何作用。对字体感觉太小的浏览者而言无疑是种很不好的用户体验过程。其实这一切都可以避免,那就是使用em单位作为字体显示单位。

浏览器的默认字体高都是16px,所以未经调整的浏览器在显示1em=16px。换算过来的话也就是说1px=0.0625em,也就是12px=0.75em, 10px=0.625em,通过1px=0.0625em大家可以在CSS编写时通过px转换成em。不过还有一种更方便的方法,继续往下看!

这种方法要用到%单位(仅1次),其实%和em简单的话可以理解成前者只是比后者多2个0。为了简化font-size的换算,大家可以在css中的body中先全局声明font-size=62.5%,这里的%的算法和em一样,100%=16px,1px=6.25%,10px=62.5%,也就是定义了默认字体大小为10px。很多初学者可能会在此定义0.625em或者直接定义12px,这是没有效果的,一定要定义font-size=62.5%!由于em具有会继承父级出血元素的字体大小的特点,这是的1em=10px,所以12px=1.2em。px与em的转换通过除以10就可以得来,很方便了吧!

此外有一点必须要注意,可能是IE处理汉字时,对于浮点的取值精确度有限,在body下62.5%出来的12px字体比直接定义的要大一点点,只要将62.5%换成63%就可以了。通过以上对CSS代码的调整,你会发现自己的网站又向用户体验设计更靠近了一步,在如今这个提倡可用性设计以及用户体验设计的网络时代这是很重要的。

Html代码

1. 2.

3. 4.

5.

6.

7. 8.

9. 脚本之家测试 10.

11. 20.

21. 22.

23. 24.

25.

font-size:1.2em 脚本之家 (可以调整)

26.

27.

font-size:12px 脚本之家 (不能调整)

28.

29.

你可以通过IE顶部菜单中的“查看-文字大小“来调整字体显示尺寸

30.

31. 32.

33.

CSS中定义的长度单位有两种,相对长度和绝对长度。相对长度单位主要有:

* em (em,元素的字体的高度)

* ex (x-height,字母 \的高度) * px (像素,相对于屏幕的分辨率) 绝对长度单位主要有:

* in (英寸,1英寸=2.54厘米) * cm (厘米,1厘米=10毫米)

* mm (米)

* pt (点,1点=1/72英寸) * pc (帕,1帕=12点)

使用px和em主要优缺点如下:

1. IE无法调整那些使用px作为单位的字体大小,而firefox能够调整使用px和em作为单位的字体;

2. 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符

合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明 Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

em有如下特点:

1. em的值并不是固定的;

2. em会继续父级元素的字体大小。

所以我们在写CSS的时候,需要注重两点: 1. body选择器中声明Font-size=62.5%;

2. 将你的原来的px数值除以10,然后换上em作为单位;

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在id为#content的div中声明了字体大小为1.2em,那么在声明div中的p标签的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继续#content的字体高而变为了

1em=12px。那么我们假设要设置p的字体为22px,这个时候就需要22除以12来得到em的值了,这就是em会继续父级元素的字体大小的特性.

但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用 12px定义的字体大小,而是稍大一点。这个问题已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有 其他的解释。

搜索更多关于: CSS样式中字体大小 的文档
CSS样式中字体大小.doc 将本文的Word文档下载到电脑,方便复制、编辑、收藏和打印
本文链接:https://www.diyifanwen.net/c34ojq896fa670es7bbdl_1.html(转载请注明文章来源)
热门推荐
Copyright © 2012-2023 第一范文网 版权所有 免责声明 | 联系我们
声明 :本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
客服QQ:xxxxxx 邮箱:xxxxxx@qq.com
渝ICP备2023013149号
Top