CSS网页制作教程:字体单位em简介

用实力验证问题

用实力验证问题

2016-02-20 01:14

今天图老师小编给大家介绍下CSS网页制作教程:字体单位em简介,平时喜欢CSS网页制作教程:字体单位em简介的朋友赶紧收藏起来吧!记得点赞哦~

刚学网页制作的时候,老师曾经告诉我必须用CSS强制定义字体大小,否则保证每个人都看到一致的效果。这一点在现在的中国站点尤为明显。包括网易、搜狐这些门户网站在内的大部分站点,用的都是绝对单位px(像素)。但是,如果从网站易用性方面考虑,字体大小应该是可变的,一些视力不是那么好的人需要放大字体才能看得清页面内容。然而,占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。国外人士非常重视网站的易用性,相当一部分外国站点已经使用em作为字体单位。

1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值。任何浏览器的默认字体大小都是16px。因此,12px = 0.75em。实际应用中为了方便换算,通常会如下设置样式:

html { font-size: 62.5%; }

这样,1em = 10px。我们常用的1.2em理论上就是12px。但是,这个换算在IE浏览器下不成立,1.2em会比12px稍大一些,解决办法是把html标签样式中的62.5%改成63%,即:

html { font-size: 63%; }

在中文的文章中,一般会在段首空两格。如果用px作为单位,对12px字体来说需要空出24px,对14px字体来说需要空出28px这样换算非常不通用。如果用上em单位,这个问题就很好解决了,1个字的大小就是1em,那两个字的大小就是2em。因此,只需这样定义就行了:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

p { text-indent: 2em; }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

CSS网页制作教程:字体单位em简介

Web开发
CSS网页制作教程:字体单位em简介

CSS的长度单位(em)与em标签

Web开发
CSS的长度单位(em)与em标签

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS网页设计字体大小(em)探讨

Web开发
CSS网页设计字体大小(em)探讨

学习CSS了解单位em和px的区别

Web开发
学习CSS了解单位em和px的区别

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS网页制作教程:网页中常用的web安全字体

Web开发
CSS网页制作教程:网页中常用的web安全字体

CSS教程:简单理解em

Web开发
CSS教程:简单理解em

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

设置Dreamweaver远程文件夹

设置Dreamweaver远程文件夹

四十三个实例DIV+CSS网页及导航布局教程

四十三个实例DIV+CSS网页及导航布局教程
下拉加载更多内容 ↓