CSS font-size 属性

CSS font-size 属性技术文档

CSS font-size 属性用于设置字体的大小。通过该属性，可以使用绝对大小、相对大小或百分比设置文本的大小。下面将详细介绍CSS font-size 属性的使用方法以及其他相关知识点。

语法

CSS font-size 属性的基本语法如下：

font-size: value;

其中，value 可以是以下类型之一：

  • 绝对大小（如：px、pt、mm、cm、in等）
  • 相对大小（如：em、rem）
  • 百分比（如：100%）

绝对大小的使用

绝对大小是指使用固定的单位来设置字体大小。通常使用像素（px）、磅（pt）、毫米（mm）、厘米（cm）、英寸（in）等固定单位。这种方式的好处是设置后可以固定文本大小，不会随着浏览器屏幕大小的变化而改变。

p {
  font-size: 16px;
}

上面的代码将会把 p 元素中的文本的字体大小设置为 16 像素。

相对大小的使用

相对大小是指使用与其他元素相关的大小作为基础。通常使用em或rem单位来设置字体大小。

em

em是相对于基础字体大小的单位。在绝大多数的浏览器中，基础字体大小是16像素。因此，1em等于16px。例如，如果一个段落的基础字体大小为16px，2em的大小将是32px。

p {
  font-size: 2em;
}

上面的代码将会把 p 元素中的文本的字体大小设置为基础字体大小的2倍。

rem

与em不同，rem（root em）是基于根元素的相对单位。在大多数浏览器中，根元素是html元素。因此，1rem等于根元素的字体大小。如果根元素的字体大小为16px，则1rem等于16px。

html {
  font-size: 16px;
}
p {
  font-size: 1.5rem;
}

上面的代码将会把 p 元素中的文本的字体大小设置为基础字体大小的1.5倍。

百分比的使用

百分比单位类似于 em 单位，但是它是相对于父元素的一种计算方式。即，1em 是相对于自身的基础字体大小，而百分比是相对于父元素的基础字体大小。

div {
  font-size: 150%;
}

上面的代码将会把 div 元素中的文本的字体大小设置为父元素字体大小的1.5倍。

总结

CSS font-size 属性可以用于设置文本的字体大小，可以使用绝对大小、相对大小或百分比来设置。绝对大小是使用固定的单位来设置字体大小，相对大小是基于其他元素相对大小来设置字体大小，而百分比是基于父元素相对大小来设置字体大小。如果设置了字体大小，建议同时设置行高，以实现更好的可读性。

CSS font-family 属性 CSS font-style 属性