当前位置: 技术文章>> css入门与进阶之字体和字号的设置

文章标题:css入门与进阶之字体和字号的设置
  • 文章分类: 前端
  • 17813 阅读

CSS是一种用于控制网页外观和排版的语言,其中设置字体和字号是基本的样式控制之一。在CSS中,可以使用font-family属性来定义字体类型,使用font-size属性来定义字号大小。

字体设置
CSS中的font-family属性用于定义字体的类型。它接受一个或多个字体家族名称作为值。字体家族指的是具有相似设计风格的字体集合,例如Serif字体、Sans-Serif字体、Monospace字体等。

示例代码

body {  font-family: "Helvetica Neue", Arial, sans-serif;}

在上面的示例中,font-family属性设置为三个字体家族名称,它们分别是“Helvetica Neue”、“Arial”和“sans-serif”。如果用户的计算机中没有安装第一个字体,那么浏览器会依次尝试使用第二个和第三个字体。

如果想要同时使用多个字体家族,可以使用逗号分隔它们。在上面的代码示例中,“Helvetica Neue”和Arial之间就用逗号分隔开了。

字号设置
CSS中的font-size属性用于定义字号大小。它接受一些预定义的关键字(如“small”、“medium”、“large”等),也可以使用长度单位(如像素、点、毫米等)。

示例代码

h1 {  font-size: 36px;}p {  font-size: 16px;}

在上面的示例中,h1元素的字号大小被设置为36像素,而p元素的字号大小被设置为16像素。

如果不指定长度单位,CSS会将其解析为默认的长度单位——像素。例如,下面的代码示例中的字号大小也是16像素。

p {  font-size: 16;}

相对字号
相对字号是一种特殊的长度单位,它相对于其他元素的字号大小进行设置。在CSS中,可以使用“em”和“rem”作为相对字号单位。

em单位
em单位相对于当前元素的字号大小进行设置。例如,如果一个元素的字号大小为16像素,那么1em就等于16像素。

示例代码

h1 {  font-size: 2em; /* 等于36像素 */}p {  font-size: 1em; /* 等于16像素 */}

在上面的示例中,h1元素的字号大小被设置为当前元素字号大小的两倍,即36像素。而p元素的字号大小被设置为当前元素字号大小的一倍,即16像素。

rem单位
rem单位相对于根元素的字号大小进行设置。在网页中,根元素通常是html元素。

示例代码

html {  font-size: 16px;}h1 {  font-size: 2rem; /* 等于32像素 */}p {font-size: 1rem; /* 等于16像素 */}

在上面的示例中,html元素的字号大小被设置为16像素。h1元素的字号大小被设置为根元素字号大小的两倍,即32像素。而p元素的字号大小被设置为根元素字号大小的一倍,即16像素。

长度单位

CSS中还有其他一些长度单位可以用于设置字号大小,例如像素(px)、点(pt)、英寸(in)、厘米(cm)等。其中像素是最常用的单位,因为它是一个固定的屏幕单位,可以保证在不同设备上的一致性。

示例代码

h1 {  font-size: 2em; /* 等于36像素 */}p {  font-size: 1.2em; /* 等于22像素 */}h2 {  font-size: 24pt; /* 等于32像素 */}

在上面的示例中,h1元素的字号大小被设置为当前元素字号大小的两倍,即36像素。而p元素的字号大小被设置为当前元素字号大小的1.2倍,即22像素。h2元素的字号大小被设置为24点,即32像素。

小结
CSS中的font-family和font-size属性可以用于控制字体和字号大小。字体可以使用字体家族名称进行设置,也可以使用多个字体家族名称进行设置。字号可以使用预定义的关键字或长度单位进行设置,也可以使用相对字号单位进行设置。熟练掌握这些CSS属性,可以让我们更好地控制网页的排版和样式,提高用户体验。


推荐文章