字体
在上一周我们说了文本属性，而另一项能让文本变得好看的就是字体啦，我们可以通过改变字体的大小，风格，样式来不让我们页面的文本模块变得单调。
字体系列
在 CSS 中，有两种不同类型的字体系列名称：
通用字体系列 - 拥有相似外观的字体系统组合（比如 “Serif” 或 “Monospace”）
特定字体系列 - 具体的字体系列（比如 “Times” 或 “Courier”）
除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：
Serif 字体1
Sans-serif 2
Monospace 字体3
Cursive 字体4
Fantasy 字体5
使用通用字体系列
可以使用属性font-family在文本中采用上述任何字体系列。如果要想使用sans-serif字体可以这样写代码：
<html>
<head>
<style type="text/css">
body {
font-family:sans-serif;
}
</style>
</head>
<body>
<h1>这是一个例子</h1>
<p>则会使一个例子，too</p>
<p>这是一个例子，too，too</p>
<p>..........................................................</p>
</body>
</html>
这样写就会从sams-serif字体中随便选一种字体，如：Helvetica。这串代码中我们把这个字体类型应用到了body元素，又因为有继承，所以这种字体会应用到body中包含的所有元素中，当然这个时候你想让body中其他的字体用别的字体类型，这个时候你就可以用到我们上周说的属性选择器来改变你想要改变的地方。（不懂得可以去这个地址去看看上周讲的属性选择器：属性选择器）
制定字体系列
（设置样式表中的字体修改也要用font-family）
这里要讲一个问题，比如我们使用这样一个代码：
h1{
font-family:Georgia;
}
这会让文档中所有的h1都是用Georgia字体。但是这里就有一种情况，如果Gerogia字体不可用，用户代理就根本不能使用这个规则。但是它不会护士这个规则，但是如果找不到一个名叫Georgia的字体，它可能只能使用默认字体来显示h1元素，（就算你打了代码）除此之外什么也不做。
但是你可以在font-family属性后面多加一个值，像这样：
h1{
font-family: Georgia, serif;
}
这样的如果G额哦人改字体不可用，则使用另外一种serif字体。
字体风格
我们使用的是font-style属性。
font-style和简单：用于在normal文本丶italic文本和oblique文本之间进行选择。唯一一点复杂的就是italic文本和oblique文本之间的差别（应为这两个光听着解释就挺相像的）。
而这三个值：
- normal-（顾名思义）文本正常显示
- italic-文本斜体显示
- oblique-文本倾斜显示
我们可以看一个实例
<html>
<head>
<style type="text/css">
p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}
</style>
</head>
<body>
<p class="normal">这是一个正常的文本</p>
<p class="italic">这是一个斜体的文本</p>
<p class="oblique">这是一个倾斜的文本</p>
</body>
</html>
下面是结果
这张图片我们就可以看出italic文本和obique文本的一点小小的差别，倾斜程度不一样（可能看不太清）官方给出的解释：
基本来说，斜体（italic）是一种单独的字体风格，对每个字幕的结构有一些小改动，来翻译过变化的外观。对于serif字体尤其如此，除了文本字符“有些斜”意外，serifs可以修改为一种斜体字体。与此不同，斜体（oblique）文本则是正常竖直文本的一个倾斜版本。表为：Italic丶Cursive和Kursiv的字体总那个是映射到italic关键字，而oblique总是对应到标为Oblique丶Slanted丶Incline字体。
字体变形
font-variant 属性可以设定小型大写字母。
它的值有：smal-caps丶normal丶inherit；初始值为：normal。
小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。
- eg1:
<html>
<head>
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>
<body>
<p class="normal">Network Science and Technology Association</p>
<p class="small">Network Science and Technology Association</p>
</body>
</html>
字体大小
font-size属性
这个应该是大家都经常用的吧，这里也就不用多说，但要注意的问题是
- 有能力管理文本的大小在 web 设计领域很重要。但是，您不应当通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。
- 虽然可以通过浏览器的缩放工具调整文本大小，但是这实际上是对整个页面的调整，而不仅限于文本。
- eg2
<html>
<head>
<style type="text/css">
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
</style>
</head>
<body>
<h1>这是标题</h1>
<h2>这也是标题</h2>
<p>这是一个段落</p>
<p>这也是一个段落</p>
<p>.........................................................</p>
</body>
</html>
我们来看看效果：
在设置字体大小是有一个单位是em，这个上周也有讲过，地址：https://blog.csdn.net/qq_33188421/article/details/85331326
字体加粗
font-weight 属性设置文本的粗细。
| 关键字 | 效果 |
|---|---|
| normal | 正常字体 |
| bold | 粗体 |
| 100~900 | 位子制定了9级加粗 |
| 100 | 最细 |
| 400 | 对应normal |
| 900 | 等价于bold |
| bolder | 更粗 |
- eg3
<html>
<head>
<style type="text/css">
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}
</style>
</head>
<body>
<p class="normal">我们可以看一下</p>
<p class="thick">这个实例</p>
<p class="thicker">这个实例</p>
</body>
</html>
我们来看看效果：
如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
好了这就是我要说的字体。
Serif 字体
这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则成该字符是成比例的。例如，小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰，比如小写 l 顶部和底部的短线，或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。 ↩︎Sans-serif 字体
这些字体是成比例的，而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。 ↩︎Monospace 字体
Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。采用这些字体，每个字符的宽度都必须完全相同，所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线，也可能没有。如果一个字体的字符宽度完全相同，则归类为 Monospace 字体，而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。 ↩︎Cursive 字体
这些字体试图模仿人的手写体。通常，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。 ↩︎Fantasy 字体
这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。 ↩︎
9503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
