CSS中font-size属性值四大种类

开发 前端
我们用px作为文字大小的单位,已经出现很多问题,最主要是体现在用户不能灵活的控制文字的大小,这里向大家描述一下CSS中font-size属性值四大种类。

本文和大家重点学习一下CSS中font-size属性值四大种类,我们用px作为文字大小的单位,已经出现很多问题,现在IE浏览器是主流,但我们不能通过浏览器设置文字大小,因为我们用px作为文字大小的单位。

CSS中font-size属性值四大种类

我们逐渐意识到,我们用px作为文字大小的单位,已经出现很多问题。最主要是体现在用户不能灵活的控制文字的大小,现在IE浏览器是主流,但我们不能通过浏览器设置文字大小,因为我们用px作为文字大小的单位。

  对于大多数用户来说或许这并无不妥,但对于年龄稍大及眼力不佳的访客来说,他们不能按他们的意愿,通过浏览器来改变文字的大小。我们以“用户至上”为原则,我们应该采取一种策略,不要求通过px为单位获得100%的精确性,我们需要获得更大的浏览器的可伸缩性与易用性,灵活的满足访客的需要。关于这类话题我们在以后51cto.com的教程中,与大家再进行深入的探讨。我们今天对font-size属性的值进行一些分析,看从中我们能得到一些什么启示。

一、长度单位

  长度单位分为两种,一种是相对长度,另一种是绝对长度。
  以下为三种相对长度单位:
  ◆em相对于父对象的大小
  ◆ex相对于特定字体中的字母x的高度
  ◆px相对于特定设备的分辨率,这是最最常用的单位,也是我们一直坚守的单位。从技术角度来说,px像素其实是一种相对大小的度量单位,它于特定设备的显示或打印的分辨率有关。例如,一个像素在被显示在计算机屏幕上与被打印在纸张上的大小是不同的。

  以下为五种font-size属性值绝对长度单位:

  绝对长度单位在打印时或在屏幕显示设备的物理尺寸已知时才比较有用。
  ◆in英寸
  ◆cm厘米
  ◆mm毫米
  ◆pt点
  ◆pc12点活字

二、相对大小的关键字

  font-size属性值相对大小的关键字只有两个值:
  ◆larger
  ◆smaller
  这两个值的设定与父对象的设定值有关。我们可以像理解老式的<small><big>那样来理解它们。它们是设定文字大小的最基本的方式,并会受到上层对象的文字大小定义的影响。

三、绝对大小的关键字

  这类关键字共有7个,他们的实际大小根据不同的浏览器及设备来决定。

  ◆xx-small
  ◆x-small
  ◆small
  ◆medium
  ◆large
  ◆x-large
  ◆xx-large

  W3C建立建议浏览器开发公司,将每个关键字之间的比例设定为1.5。并推荐让这个比例保持恒定,妈medium是small的1.5倍。同样large是medium的1.5倍。

四、百分比

  font-size属性值中使用百分比设置大小,将在容器对象文字大小的基础上进行改变。如果我们设置body的文字大小为10。我们设置p的文字大小为150%,则p的文字大小就为15。不管10是什么样的单位,百分比作为一种比例进行缩放调整。

  我们可以从更深层次去思考,我们将在51cto.com以后的文章中进行发布,面对这些定义文字大小属性值的单位,我们如何为用户提供一个灵活的浏览环境,并允许他们按他们的意愿来控制文字的大小以更方便于浏览。
 

【编辑推荐】

  1. 详解CSS布局技巧十则
  2. CSS布局中float和position属性使用技巧
  3. CSS中实现DIV容器垂直居中方法揭秘
  4. CSS Sprites对CSS布局的意义及优缺点
  5. CSS布局中display:inline-block属性用法详解

 

 

责任编辑:佚名 来源: 52css.com
相关推荐

2010-08-30 15:06:04

CSSfont-size

2010-09-03 13:02:04

CSSposition

2010-09-10 10:10:36

CSS属性

2010-09-02 15:12:28

CSS属性值选择器

2011-03-21 09:01:49

CSS框架

2010-08-17 10:31:10

DIV布局属性

2010-08-25 13:40:31

CSSfont-weight

2010-08-17 09:20:28

DIV布局

2010-09-10 09:22:50

DIV布局

2015-07-17 09:50:16

Carthage优劣比较

2010-09-02 10:12:34

CSS导航

2010-08-25 13:25:22

CSSfont-family

2010-09-14 17:33:55

DIV+CSS布局

2010-09-15 13:50:04

CSSposition属性

2010-08-20 15:43:00

Div CSSSEO

2010-08-16 14:12:44

DIV+CSS

2013-01-06 10:44:43

微软Windows 8云计算

2010-09-02 09:44:07

DIV+CSSSEO

2010-09-02 10:43:24

CSS文件

2010-09-14 13:32:33

CSS编码准则
点赞
收藏

51CTO技术栈公众号