7.2. CSS font-size 属性

font-size -- 定义字体的大小
  • 取值: <absolute-size> | <relative-size> | <length> | <percentage> | inherit
    • <absolute-size>:绝对字体尺寸
      • 取值:xx-small | x-small | small | medium | large | x-large | xx-large
        • xx-small:最小
        • x-small:较小
        • small:小
        • medium:正常(默认值),根据字体进行调整
        • large:大
        • x-large:较大
        • xx-large:最大
    • <relative-size>:相对字体尺寸(相对与其父容器的字体尺寸)
      • 取值:larger | smaller
        • larger:相对于父容器中字体尺寸进行相对增大,使用成比例的em作为单位
        • smaller:相对于父容器中字体尺寸进行相对减小,使用成比例的em作为单位
    • <length>:CSS长度表示法
    • <percentage>:CSS百分比表示法(相对与其父容器的字体尺寸)
    • inherit:继承
  • 引用网址:http://www.dreamdu.com/css/property_font-size/
  • 初始值: medium(绝对字体尺寸中的一个取值)
  • 继承性: 是
  • 适用于: 所有元素
  • font,中文"字体",size,中文"尺寸,大小"
  • small,中文"小",medium,中文"中",large,中文"大"

说明

  • 中文常用的字体大小是12px,像文章的标题等应该显示大字体,但此时不应使用字体大小属性,应使用h1,h2HTML标签
  • 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标题标签的对应关系

绝对字体尺寸和HTML标题标签有一定对应关系
绝对字体尺寸 xx-small x-small small medium large x-large xx-large
HTML标题标签 h6 h5 h4 h3 h2 h1

相对字体表示法

  • 取值: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 属性示例 -- 可以尝试编辑



  • 教程中有什么不懂的地方?发现教程的错误!对教程有什么建议!快快联系猴子呀dreamdu@163.com,:)
赞助梦之都