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

2016-02-20 01:14 2 1 收藏

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

【 tulaoshi.com - Web开发 】

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

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

html { font-size: 62.5%; }

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

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

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

html { font-size: 63%; }

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

p { text-indent: 2em; }

来源:https://www.tulaoshi.com/n/20160220/1633535.html

延伸阅读
标签: Web开发
第一步 下面是我们将要动手制作的设计图。在这篇教程里我们只制作首页,不过你可以以此为基础用相同的布局制作内页。 第二步 首先要做的是确定页面结构。随着你对CSS布局的逐步学习,这个过程会变得越来越简单。通过运用大量绝对定位和大幅背景图片,我们可以非常简单地完成这个设计。 什么是绝对定位? 一个HTML元素(比如di...
标签: Web开发
我们在网页教学网中向大家介绍过很多CSS经验与技巧,这些东西都发布在http://www.webjx.com/css/的文章中,相信对大家是有一些帮助与启发的。有些习惯显得尤为重要,今天与您分享六个CSS习惯。因为习惯其实是会变的,所以只能写最近的。这些习惯都跟技术无关,如果不遵守,也不会出错。但是我觉得良好的习惯会体现一个人的素质。 一、...
标签: Web开发
1. position:static 所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。 一般来说,不用指定 position:static,除非想要覆盖之前设置的定位。 #div-1 { position:static;} 2. position:relative 如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文...
标签: Web开发
在进行DivCSS布局时,需要对文本进行控制,我们在webjx.com以前的文章中,也讲过这方面的知识,今天系统的向大家介绍一下。CSS中控制换行的四种属性。 一、white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果,点此查看示例。 语法: white-space : normal | pre | nowrap 取...
标签: Web开发
       从前没有网页设计师,最早的网页都只有文字,后来有Html,便开始有了网页设计师。 如今有很多人都片面的认为网页设计师从事的是平面设计的工作,但如果不懂得html,很难 算得上是一流的网页设计师。         Html让纯文本的网页变得丰富起来,图形图像、音频、视频...

经验教程

883

收藏

67
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部