8.2. CSS font-size 属性

说明

• 中文常用的字体大小是12px,像文章的标题等应该显示大字体,但此时不应使用字体大小属性,应使用h1,h2等HTML标签
• HTML的big,small标签定义了大字体和小字体的文字,此标签已经被w3c抛弃,真正符合标准网页设计的显示文字大小的方法是使用 font-size CSS属性
• 在浏览器中可以使用Ctrl++增大字体尺寸,Ctrl--减小字体尺寸

绝对字体表示法

• 取值：xx-small | x-small | small | medium | large | x-large | xx-large
• 绝对字体长度都是根据一定的缩放因子变化的(CSS1中使用1.5做为缩放因子,CSS2中使用1.2作为缩放因子).比如一种正常的字体是12px,我们假设它是medium,那么large=12*1.2=14(四舍五入后的14),那么xx-large=12*1.2*1.2*1.2=21px.
• 从上面的分析可以看出绝对字体中的绝对这两个词使用的并不恰当,真实的字体大小要根据两方面确定.1，浏览器默认的字体大小.2，*使用了何种字体

示例

p
{
	font-size:12px;
}

p#xxsmall
{
	font-size:xx-small;
}

p#xsmall
{
	font-size:x-small;
}

p#small
{
	font-size:small;
}

p#medium
{
	font-size:medium;
}

p#xlarge 
{
	font-size:x-large;
}

p#xxlarge
{
	font-size:xx-large;
}

CSS font-size 属性示例 -- 可以尝试编辑

绝对字体尺寸和HTML标题标签的对应关系

相对字体表示法

• 取值：larger | smaller
• 相对于父容器中字体尺寸进行相应调整

示例

div
{
	font-size:5em;
}

div#father
{
	font-size:larger;
}

div#son
{
	font-size:smaller;
}

CSS font-size 属性示例 -- 可以尝试编辑

百分比字体表示法

• 取值：CSS长度表示法

示例

div#em
{
	font-size:5em;
}

div#px
{
	font-size:5px;
}

div#pt
{
	font-size:5pt;
}

CSS font-size 属性示例 -- 可以尝试编辑

百分比字体表示法

• 取值：CSS百分比表示法
• 相对于父容器中字体尺寸进行相应调整

示例

div
{
	font-size:5em;
}

div#father
{
	font-size:150%;
}

div#son
{
	font-size:50%;
}

CSS font-size 属性示例 -- 可以尝试编辑

• CSS教程

• 8 CSS字体
• 8.1 CSS font-family 属性
• 8.2 CSS font-size 属性
• 8.3 CSS font-style 属性
• 8.4 CSS font-variant 属性
• 8.5 CSS font-weight 属性
• 8.6 CSS font 属性