CSS font-size 属性用于指定字体的大小。
因为font-size
属性的值会被用于计算em和ex长度单位,所以定义font-size
属性的值可能会改变其它元素的大小。例如,如果一个元素的尺寸使用em
作为单位,那么这个元素上设置的字体大小会直接影响这个元素的尺寸,因为em
和ex
是相对单位,这个相对值是基于该元素的字体大小来计算的。
举例来说,如果一个元素的宽度设置为5em,而为这个元素设置的font-size
的值为16像素,那么这个元素的实际宽度就是16 x 5 = 80px
。另外,不仅是元素的长度和高度会被影响,如果padding
和margin
等属性使用了相对单位,同样也会被影响。
关于相对单位,可以参考CSS <length>数据类型。
字体的大小可以设置为绝对值或相对值。绝对值可以使用关键字或<length>数据类型的绝对长度来指定。相对值可以<length>数据类型的相对长度或<percentage>数据类型来指定。
元素的字体大小还可以使用预定义的关键字来设置。关键字又分为绝对关键字和相对关键字。
<absolute-size> = xx-small | s-small | small | medium | large | x-large | xx-large <relative-size> = larger | smaller
关键字是定义网络字体大小的好方法。通过在body元素上定义关键字字体大小,你可以在网页的任何地方设置相对字体大小,这让你能轻易地缩放整个网页的字体大小。
子元素会继承父元素的字体大小,除非你为子元素指定了新的font-size
属性。
官方语法
font-size: <absolute-size> | <relative-size> | <length> | <percentage> | inherit
参数:
- <absolute-size>:
<absolute-size>
是一组由浏览器定义的字体尺寸大小列表。各个浏览器会为每个关键字指定一个具体的字体尺寸。可用的关键字有:xx-small
、x-small
、small
、medium
、large
、x-large
和xx-large
。这组绝对大小关键字定义是相对于用户的默认字体大小(medium)。它的原理和使用过时的<font size="1">
到<font size="7">
来指定字体大小类似(默认的字体大小为<font size="3">
)。 - <relative-size>:指定相对字体关键字:
larger
和smaller
,它通过父元素的字体大小来计算元素本身的字体大小。例如,如果父元素的字体大小设置为larger
,元素本身的相对字体大小也设置为larger
,那么元素的字体大小就是x-large
。 - <length>:使用<length>数据类型来设置字体的大小。不允许为负数。如果使用相对长度单位,那么元素的字体大小相对于它的父元素的字体大小。例如,元素的字体大小设置为2em,表示它的字体大小是父元素字体大小的2倍。
- <percentage>:使用<percentage>数据类型来设置字体大小。百分比字体大小同样是相对于元素的父元素来计算值。例如,如果元素的字体大小设置为50%,表示它的字体大小是其父元素字体大小的一半。
- inherit:继承父元素的字体大小。
font-size
属性的初始值为medium
。
应用范围
font-size
属性可以应用在所有元素上。
示例代码
下面的示例都是有效的字体大小取值:
/* <absolute-size>,绝对大小值 */ 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; /* <relative-size>,相对大小值 */ font-size: larger; font-size: smaller; /* <length>,长度值 */ font-size: 12px; font-size: 0.8em; /* <percentage>,百分比值 */ font-size: 80%; font-size: inherit;
在线演示
下面的例子演示了各种类型的字体大小设置,使用的CSS代码如下:
.font-small { font-size: xx-small; } .font-larger { font-size: larger; } .font-point { font-size: 24pt; } .font-percent { font-size: 200%; } .font-medium{ font-size: medium; } .font-medium span{ font-size: smaller; color: #d2527f; }
字体大小为关键字small
字体大小为关键字larger
字体大小的单位为pt
字体大小使用百分比来设置
这是一段字体大小为默认字体大小medium的文字(这里的文字使用了相对关键字smaller来设置)。
浏览器支持
所有的现代浏览器都支持font-size
属性,包括Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。