CSS 字体大小单位选择与设置

时间:2023-05-16 09:54:07

在 CSS 中,您可以使用不同的单位来设置字体大小。以下是常见的 CSS 字体大小设置方法:

CSS字体大小设置样式单词:font-size

设置数值+单位即可设置对象字体大小,以下关于字体大小之长度单位介绍。

绝对单位:

px:像素单位,指定具体的像素大小。例如:font-size: 16px;
pt:点(1/72英寸)单位,通常用于打印样式。例如:font-size: 12pt;
cm、mm、in:厘米、毫米、英寸单位。
相对单位:

em:相对于父元素的字体大小。例如,如果父元素的字体大小为 16px,则 font-size: 1.5em; 表示子元素的字体大小为父元素字体大小的 1.5 倍。
rem:相对于根元素(<html>)的字体大小。例如,如果根元素的字体大小为 16px,则 font-size: 1.2rem; 表示元素的字体大小为根元素字体大小的 1.2 倍。
vw:视口宽度的百分比,相对于视口宽度的一部分。例如,font-size: 3vw; 表示字体大小为视口宽度的 3%。
相对关键字:

small、medium、large、x-large:相对于浏览器的默认字体大小。
larger、smaller:相对于父元素或浏览器的默认字体大小,分别表示更大或更小的字体。
示例:

p {
font-size: 16px; /* 使用像素单位 */
}

h1 {
font-size: 2em; /* 相对于父元素字体大小的两倍 */
}

body {
font-size: 1.2rem; /* 相对于根元素字体大小的 1.2 倍 */
}

h2 {
font-size: 4vw; /* 相对于视口宽度的 4% */
}

h3 {
font-size: larger; /* 相对于浏览器默认字体大小更大 */
}

以上是一些常见的 CSS 字体大小设置方法,您可以根据需求选择适合的单位或关键字来调整字体大小。

相关词 字体大小