本文详细介绍了CSS中字体和文本的各种属性，包括字体系列、大小、粗细、样式及文本的颜色、对齐方式、装饰、缩进和行间距等，并通过实例展示了这些属性的应用。
CSS字体属性
CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式
字体系列
CSS使用font-family属性定义文本的字体系列
p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei","微软雅黑";}
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下，如果有空格隔开的多个单词组成的字体加引号
- 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
- 最常见的几个字体：body { font-family:‘Microsoft YaHei’,‘tahoma,arial’,‘Hiragino Sans GB’;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS字体属性之字体系列</title>
<style type="text/css">
h2 {
font-family: '微软雅黑';
}
p {
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<h2>《鬼谷八荒》修仙人的天堂</h2>
<p>懵懵懂懂的小伙子一头撞进了修仙世界里。</p>
<p>24岁，是内门弟子</p>
<p>在各种机缘巧合之下，与一位属性爆棚，面容姣好的美女一见钟情</p>
<p>隔三岔五，你侬我侬的两位修仙者有了更深层次的交流----男女双修</p>
<p>是否能坚守本心，与困难做斗争；慎做抉择，把握自己的命运</p>
<p>书写自己的精彩修仙路</p>
</body>
</html>
字体大小
CSS使用font-size属性定义字体大小
p {
font-size: 20px;
}
px（像素）大小是我们网页的最常用的单位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS字体属性之字体大小</title>
<style type="text/css">
body {
font-size: 16px;
}
/* 标题标签比较特殊，需要单独指定文字大小 */
h2 {
font-size: 18px;
}
</style>
</head>
<body>
<h2>《标题》</h2>
<p>内容</p>
<p>内容</p>
</body>
</html>
字体粗细
CSS使用font-weight属性设置文本字体的粗细
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS字体属性之字体粗细</title>
<style type="text/css">
.bold {
/* font-weight: bold; 定义粗体（加粗的） */
/* 这个700的后面不要跟单位，等价于bold，都是加粗的效果 */
font-weight: 700;
}
h2 {
font-weight: normal;/* 默认值（不加粗的） */
/* font-weight: 400 */
}
</style>
</head>
<body>
<h2>《标题》</h2>
<p>内容1</p>
<p class="bold">内容2</p>
<p>内容3</p>
<p>内容4</p>
<p>内容5</p>
</body>
</html>
文字样式
CSS使用font-style属性设置文本的风格
p {
font-style: normal;
}
| 属性值 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 |
| italic | 浏览器会显示斜体的字体样式 |
注意：要给斜体标签(em,i)改为不倾斜字体可以用font-style设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS字体属性之文字样式</title>
<style type="text/css">
p {
font-style: italic;
}
em {
font-style: normal;/* 让倾斜的字体不倾斜 */
}
</style>
</head>
<body>
<p>同学，上课时候的你</p>
<em>哈哈哈~</em><!-- em：斜体标签 -->
</body>
</html>
CSS文本属性
Text（文本）属性可定义文本的外观，如颜色、对齐、装饰文本、文本缩进、行间距等
文本颜色
color属性用于定义文本的颜色
| 表示方式 | 属性值 |
|---|---|
| 预定义的颜色值 | red、green、blue，还有其他的颜色等等 |
| 十六进制 | #FF0000、#FF6600、#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS文本外观属性之颜色</title>
<style type="text/css">
div {
/* color: deeppink; */
/* color: #ff00ff; */
color: rgb(255, 88, 188);
}
</style>
</head>
<body>
<div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
</body>
</html>
文本对齐
text-align属性用于设置元素内文本内容的水平对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本外观之文本对齐</title>
<style type="text/css">
h1 {
/* 本质是让h1盒子里的文字水平居中对齐 */
text-align: center;
/* text-align: left; 左对齐 */
/* text-align: right; 右对齐 */
}
</style>
</head>
<body>
<h1>居中的标题</h1>
</body>
</html>
装饰文本
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等
| 属性值 | 描述 |
|---|---|
| none | 默认。没有装饰线（最常用） |
| underline | 下划线。链接a自带下划线（常用） |
| overline | 上划线。（几乎不用） |
| line-through | 删除线。（不常用） |
注意：重点记住—>如何添加下划线？如何删除下划线？其余了解。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本外观之装饰文本</title>
<style type="text/css">
div {
/* 下划线 */
/* text-decoration: underline; */
/* 删除线 */
/* text-decoration: line-through; */
/* 上划线 */
text-decoration: overline;
}
a {
text-decoration: none;/* 去掉链接的下划线 */
color: #FFFF00;
}
</style>
</head>
<body>
<div>粉红色的回忆</div>
<br>
<a href="#">黄色的回忆</a>
</body>
</html>
文本缩进
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进
em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本外观之文本缩进</title>
<style type="text/css">
p {
font-size: 24px;
/* text-indent: 20px; */
/* 此时写了2em，则是缩进当前元素2个文字大小的距离 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>如果你听过《黑魂》，那你一定听过这款国产“魂like游戏《黑神话·悟空》，不过短短十三分钟的实机操作演示，
在B站仅一天就拥有了千万的播放量。许多玩家对黑悟空寄予厚望，认为这是国产3A大作，意味着中国单机游戏的崛起。
同时也有不少玩家发出叹息：“又是西游记题材，冷饭炒个千八百遍，厨师不腻，吃饭的人都该吐了。“</p>
<p>确实，在游戏领域，带有国风历史性质的题材，除了“三国“就是”西游记“，
在taptap平台上搜索三国，所推出的游戏就有1876款，尤其是带有战略性质的SLG类型，似乎不和“三国”题材挂钩就不会做游戏了。
大量重复，枯燥的同题材游戏被制作出来，赵云在长坂坡七进七出了无数遍，诸葛亮时至今日仍在夜复一夜地火烧赤壁。</p>
<p>也许在未来国产3A大作之外，我们除了拥有《黑神话·悟空》之外，还会拥有聊斋的题材，山海经的题材，搜神记题材。
也许在未来国产SLG游戏类型之中，我们除了像率土之滨这样一成不变的三国，也会看到春秋战国题材，五代十国题材，安史之乱题材。
那些布满尘埃的书页一定会再次被翻动，那些尘封已久的故事也一定会重新打动我们。
不要让市场决定题材，去唤醒传统，挖掘出那些优秀的国风题材，重新定义市场吧！</p>
</body>
</html>
行间距
line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离
行间距分三部分组成：上间距、文本高度、下间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本外观之行间距</title>
<style type="text/css">
p {
text-indent: 2em;
line-height: 25px;
}
div {
line-height: 26px;
}
</style>
</head>
<body>
<div>游戏</div>
<p>如果你听过《黑魂》，那你一定听过这款国产“魂like游戏《黑神话·悟空》，不过短短十三分钟的实机操作演示，
在B站仅一天就拥有了千万的播放量。许多玩家对黑悟空寄予厚望，认为这是国产3A大作，意味着中国单机游戏的崛起。
同时也有不少玩家发出叹息：“又是西游记题材，冷饭炒个千八百遍，厨师不腻，吃饭的人都该吐了。“</p>
<p>确实，在游戏领域，带有国风历史性质的题材，除了“三国“就是”西游记“，
在taptap平台上搜索三国，所推出的游戏就有1876款，尤其是带有战略性质的SLG类型，似乎不和“三国”题材挂钩就不会做游戏了。
大量重复，枯燥的同题材游戏被制作出来，赵云在长坂坡七进七出了无数遍，诸葛亮时至今日仍在夜复一夜地火烧赤壁。</p>
<p>也许在未来国产3A大作之外，我们除了拥有《黑神话·悟空》之外，还会拥有聊斋的题材，山海经的题材，搜神记题材。
也许在未来国产SLG游戏类型之中，我们除了像率土之滨这样一成不变的三国，也会看到春秋战国题材，五代十国题材，安史之乱题材。
那些布满尘埃的书页一定会再次被翻动，那些尘封已久的故事也一定会重新打动我们。
不要让市场决定题材，去唤醒传统，挖掘出那些优秀的国风题材，重新定义市场吧！</p>
</body>
</html>
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新闻页面</title>
<style type="text/css">
body {
font: 16px/28px 'Microsoft YaHei';
}
h1 {/* 文字不加粗 */
font-weight: 400;
text-align: center;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
}
h4 {
text-indent: 17em;
}
.gray {
color: #888888;
font-size: 12px;
text-align: center;
}
a {
text-decoration: none;
}
.search {
color: #666666;
width: 170px;
}
.btn {
font-weight: 700;
}
p {
text-indent: 2em;
}
.pic {
text-align: center;
}
ul li {
text-indent: 15em;
list-style: none;
}
</style>
</head>
<body>
<h1>GameSpot简评：</h1>
<div class="gray">
2021-04-10 15:16 来源：<a href="#">游民星空</a>
<input type="text" value="请输入查询条件" class="search"> <button class="btn">搜索</button>
</div>
<hr>
<h3>《先驱者》</h3>
<p>《先驱者》并不是个由大量新创意定义的游戏，而是一款将各类熟悉的元素通过实验性的方式融于一体的作品。
它是一款带有刷装备-射击元素的角色扮演游戏；它是一款有着科幻外皮、严肃而黑暗、但又经常抖出不少幽默段子的游戏；
它是一款第三人称掩体游戏，又需要你冲出掩体去用自己那有点滑稽的致命魔法粉碎敌人。至于这种混合体能否吸引你，
那就要取决于你对于探索这个战乱星球以及这里的苟延残喘的人类残余势力的享受程度了。
</p>
<p class="pic">
<img src="img/202104090933184841_small.jpg" width="1000px">
</p>
<h2>评分：8分 优秀</h2>
<h4>优点：</h4>
<ul>
<li>以有趣的方式混合了多种射击游戏机制</li>
<li>庞大的故事与传说，在Enoch星球上创造了有关迷人的世界。</li>
<li>将掩体射击玩法、刷装-射击、合作和超能力等玩法结合，创造出了一种激烈又具有战术性的战斗方式。</li>
<li>剧情严肃而有自知，也很平衡。</li>
<li>终局游戏活动的疯狂程度恰到好处，会对计划性和战略思考有所奖励。</li>
</ul>
<h4>缺点：</h4>
<ul>
<li>当掩体枪战和跑动-射击玩法没能很好结合时，战斗部分就很容易让人产生挫败感。</li>
<li>剧情和人物有时候会变得有点边缘化。</li>
<li>很多剧情悬而未决，而且故事情节经常转移重心，没能画出令人满意的句点。</li>
</ul>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
