CSS字体

李小白123

已于 2022-07-22 15:26:22 修改

阅读量761

点赞数 1

文章标签： css 前端 html

于 2022-07-22 11:45:30 首次发布

本文链接：https://blog.csdn.net/m0_56176898/article/details/125928020

版权

设置文本的字体

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置文本的字体</title>
<style>
p.serif {font-family:"Times New Roman",Times,serif;} /*font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。*/
p.sansserif {font-family:Arial,Helvetica,sans-serif;} /*多个字体系列是用一个逗号分隔指明：*/
</style>
</head>

<body>
<h1>CSS font-family</h1>
<p class="serif">这一段的字体是 Times New Roman </p>
<p class="sansserif">这一段的字体是 Arial.</p>

</body>
</html>

CSS字型：

通用字体系列-用用外观的字体系统组合（如“Serif”或“Monospace”）

特定字体系列-一个特定的字体系列（如 "Times" 或 "Courier"）

Serif

Times New Roman Georgia

Serif字体中字符在行的末端拥有额外的装饰

Sans-serif

Arial Verdana

"Sans"是指无 - 这些字体在末端没有额外的装饰

Monospace

Courier New Lucida Console

所有的等宽字符具有相同的宽度

字体样式：

正常 { font-style: normal; }

倾斜 { font-style: italic; }

字体大小像素：

如果不设置字体大小，默认大小和普通文本段落一样，是16像素（16px=1em）.

{font-size: 40px;}

用em设置字体大小：

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

{ font-size: 2.5em; } /* 40px/16=2.5em */

使用百分比和EM组合

在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：

body {font-size:100%;}

字体粗细：

{font-weight: normal;}

{ font-weight: bold;}

{ font-weight: 400;}

值	描述
normal	默认值，定义标准的字符
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
定义由细到粗的字符。400等同于 normal,而 700 等同于bold