CSS入门二、美化页面元素

最新推荐文章于 2024-07-13 11:50:40 发布

h270626

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量365

点赞数 5

文章标签： css 前端

本文链接：https://blog.csdn.net/h270626/article/details/139639631

版权

CSS入门二、美化页面元素
1、字体属性
CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）

（1）字体系列font-family
font-family 属性定义文本的字体系列。

各种字体之间必须使用英文逗号隔开，如果有空格隔开的多个单词组成的字体加引号。

常见取值：

具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等…
字体系列：sans-serif、serif、monospace等……
渲染规则：从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体，如果都不支持，此时会显示系统默认自带字体。

兼容性：尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS字体属性之字体系列</title>
<style>
h2 {
font-family: '微软雅黑';
}
p {
/* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<h2>pink的秘密</h2>
<p>那一抹众人中最漂亮的颜色,</p>
<p>优雅,淡然,又那么心中清澈.</p>
<p>前端总是伴随着困难和犯错,</p>
<p>静心,坦然,攻克一个又一个.</p>
<p>拼死也要克服它,</p>
<p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>