font-size

font-size CSS 属性指定字体的大小。因为该属性的值会被用于计算em和ex长度单位，定义该值可能改变其他元素的大小。

示例

/* ，绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* ，相对大小值 */
font-size: larger;
font-size: smaller;

/* ，长度值 */
font-size: 12px;
font-size: 0.8em;

/* ，百分比值 */
font-size: 80%;

font-size: inherit;

浏览器支持

语法:

设置或检索对象中的字体尺寸

font-sizeCSS 属性指定字体的大小。因为该属性的值会被用于计算em和ex长度单位，定义该值可能改变其他元素的大小。

取值:

• absolute-size=xx-small | x-small | small | medium | large | x-large | xx-large

  根据对象字号进行调节。以medium作为基础参照，xx-small相当于medium3/5(h6)，x-small:3/4，small:8/9(h5)，medium:1(h4)，large:6/5(h3)，x-large:3/2(h2)，xx-large:2/1(h1)

  

  该套绝对大小关键字定义相对于用户的默认字体大小(medium)。与展示HTML的到（用户默认字体大小）类似。larger, smaller比父元素的字体大或小，使用与上面的关键字的相近缩放比率。

• relative-size=smaller | larger

  相对于父对像中字号进行相对调节。使用成比例的em单位计算。

• length：用长度值指定文字大小。不允许负值。当单位为em或ex时，大小为相对于父元素的文字的大小。例如，0.5em就是当前元素的父元素的字体大小的一半
• percentage:用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。

最好使用用户默认字体大小的相对大小，避免使用除了em或ex的绝对大小单位。但是如果一定要使用绝对大小的话，px是众多单位中最好的选择，因为它的含义不会随着操作系统所认为的屏幕分辨率的大小（通常是不对的）改变而改变。

可用方法

有多重定义字体大小的方法，包括了使用关键字及使用像素或em数字值。请根据网页的特定需求选择适用的方法。

关键字

关键字是定义网络字体大小的好方法。通过在body元素上定义关键字字体大小，你可以在网页的任何地方设置相对字体大小，这让你能轻易地缩放整个网页的字体大小。

px

当你需要精确地像素时，用px设定字体大小是一种好方法。一像素的大小是固定的。这是一个不取决于平台的、跨浏览器的准确设置字体大小高度为你所想的像素大小的方法。因为不同浏览器为得到同样效果的算法可能不同，所以显示效果可能有微小的不同。

字体大小的设置也可以使用组合值。例如，如果父元素设定为16px而子元素设定为larger,子元素显示的字体大小就会大于父元素。

em

另一种方法是用em值设定字体大小。em值的大小是动态的。当定义或继承font-size属性时，1em等于该元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话，那它将等于浏览器默认文字大小，通常是16px。所以通常1em = 16px。2em = 32px。如果你设置了body元素的字体大小为20px，那1em = 20px、2em = 40px。那个2就是当前em大小的倍数。

可用这个公式计算像素大小的等价em大小：

em = 希望得到的像素大小 / 父元素字体像素大小

例如，假设body的文字大小设为1em，且浏览器默认1em = 16px。如果你想得到12px，那你就可设定0.75em(because 12/16 = 0.75)。同样的，如果你想设定文字大小为10px，那就定义0.625em(10/16 = 0.625)；若想要22px就定义1.375em(22/16=1.375).

一个流行的技巧是设置body元素的字体大小为62.5%(即默认大小16px的62.5%)，等于10px。现在你可以通过计算基准大小10px的倍数，在任何元素上方便的使用em单位。这样有6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em。例如：

body {
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
  font-size: 1.6em; /* 1.6em = 16px */
}

因为em可以自动适应用户的字体，em是一个非常有用的CSS单位。

例子

/* 设定段落文字大小为非常大 */
p { font-size: xx-large }

/* 设定一级标题的文字大小为2.5倍大小 */
h1 { font-size: 250% }

/* 设定span里的文字大小为16px */
span { font-size: 16px; }

.small {
	font-size: xx-small;
}
.larger {
	font-size: larger;
}
.point {
	font-size: 24pt;
}
.percent {
	font-size: 200%;
} 
small h1
larger h1
24 point h1
200% h1

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com