整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
定义字体系列，大小，粗细和文字样式
p {
font: font-style font-weight font-size/line-height font-family;
}
不能更换顺序，必须保留font-size和font-family
定义文本外观，如：文本颜色，对齐文本，装饰文本，文本缩进，行间距等
节我们来讲字体样式，之前我们学习 HTML 的时候学过一些用于字体加粗、倾斜的标签，但是使用标签来实现的效果肯定没有我们通过 CSS 中的样式来的方便。
接下来我们会给大家介绍下面这几个属性的使用：
通过学习上述这几个 CSS 属性，我们可以实现给 HTML 中的文字设置字体、大小、风格、倾斜、加粗等。
font-family 属性用于设置一个元素的字体，字体就是像宋体、楷体等。
通过 font-family 属性，可以同时声明多种字体，字体之间使用逗号分隔。根据字体的调用原则，会优先调用第一种字体，如果没有找到，则会尝试调用下一个字体，如果都找不到则调用默认字体。
示例：
例如为下面这个 <p> 标签中的文本设置字体：
<p>Hello，侠课岛</p>
可以使用标签选择器，然后在 font-family 属性中设置：
p{
font-family:'Times New Roman','sans-serif', 宋体, 楷体;
}
在声明字体时，我们应该分别声明英文字体和中文字体，且英文字体的声明应该在中文字体之前。因为绝大部分中文字体里包含英文字母，但是不是很好看，而英文字体里不包含中文字符。所以如果我们不希望用中文字体来显示英文，就一定要记得先声明英文字体。先声明的会先调用。
常用英文字体：Arial、Helvetica、Tahoma、Verdana、Lucida Grande、Georgia 等。
常用中文字体：宋体 SimSun、黑体 SimHei、微软雅黑 Microsoft YaHei、仿宋 FangSong、楷体 KaiTi 等。
font-size 属性用于设置字体的大小，常用的单位为 px，即像素。
px 是 Pixel 的缩写，是可以在数字显示设备上显示和表示的数字图像或图形的最小单位。像素是数字图形中的基本逻辑单元，像素也称为图像元素。
示例：
例如我们来看下面这段代码（其他HTML结构代码没有展示出来）：
<body>
<h1>断句</h1>
<p>近水楼台先得月，向阳花木易为春。</p>
</body>
在浏览器中的演示效果为：
然后此时，我们通过 font-size 来将其中的 <h1> 标签中的字体设置为 14px，<p> 标签中的字体设置为 20px：
h1{
font-size: 14px;
}
p{
font-size: 20px;
}
在浏览器中演示效果就变为了下图所示：
很明显，通过 CSS 中的 font-size 属性可以设置任意标签中的字体大小。
font-style 设置字体的风格，可以将字体设置成斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。
此属的常用属性值如下所示：
示例：
将下面三个 <p> 中的内容设置为不同的字体风格，可以使用类选择器：
<body>
<p class="normal">将字体设置为标准的字体样式</p>
<p class="italic">将字体设置为斜体的字体样式</p>
<p class="oblique">将字体设置为倾斜的字体样式</p>
</body>
CSS 样式代码：
.normal {
font-style:normal;
}
.italic {
font-style:italic;
}
.oblique {
font-style:oblique;
}
在浏览器中演示效果如下所示：
font-weight 属性用于设置显示元素的文本中所用的字体加粗。
此属性的常用属性值如下所示：
示例：
将下面的 <p> 标签的粗细分别设置为 normal、bold、700、900：
<p class="w1">将字体设置为:normal</p>
<p class="w2">将字体设置为:bold</p>
<p class="w3">将字体设置为:700</p>
<p class="w4">将字体设置为:900</p>
CSS 样式代码：
.w1 {
font-weight: normal;
}
.w2 {
font-weight: bold;
}
.w3 {
font-weight: 700;
}
.w4 {
font-weight: 900;
}
在浏览器中演示效果：
font 属性用于在一个声明中设置所有的字体属性，各个属性之间使用空格隔开。也就是上述几个属性的综合简写属性。
如果我们使用 font 属性来设置字体样式，设置顺序分别是：font-style、font-variant、font-weight、 font-size/line-height、font-family。可以不设置其中的某个值，未设置的属性会使用其默认值。
示例：
<p class="p1">草长莺飞二月天，拂堤杨柳醉春烟。</p>
<p class="p2">留连戏蝶时时舞，自在娇莺恰恰啼。</p>
CSS 样式代码：
.p1{
font: italic bold 20px 'sans-serif', 楷体;
}
.p2{
font: bold 14px 'Arial', 宋体;
}
在浏览器中演示效果：
注意，在使用 font 属性时，font-size 和 font-family 的值是必需的，如果没有设置这两个属性值，则不会生效。
本节学习的几个属性值都是 CSS 中最基本的属性，特别是 font-size 属性，我们会经常用到。一般浏览器会有一个默认的字体大小，例如 16px，而编写页面时如果我们希望大部分页面内容正文字体大小为 12px 或 14px，就会在 <body> 标签上设置，这样就不用一个个标签去设置。
SS字体属性定义字体，加粗，大小，文字样式。
serif和sans-serif字体之间的区别
在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读
CSS字型
在CSS中，有两种类型的字体系列名称：
通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）
| Generic family | 字体系列 | 说明 |
|---|---|---|
| Serif | Times New RomanGeorgia | Serif字体中字符在行的末端拥有额外的装饰 |
| Sans-serif | ArialVerdana | "Sans"是指无 - 这些字体在末端没有额外的装饰 |
| Monospace | Courier NewLucida Console | 所有的等宽字符具有相同的宽度 |
字体系列
font-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
多个字体系列是用一个逗号分隔指明：
实例
p{font-family:"Times New Roman", Times, serif;}
对于较常用的字体组合，看看我们的 Web安全字体组合。
字体样式
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
实例
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体大小
font-size 属性设置文本的大小。
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落：
字体大小的值可以是绝对或相对的大小。
绝对大小：
设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
相对大小：
相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
设置字体大小像素
设置文字的大小与像素，让您完全控制文字大小：
实例
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。
虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本
用em来设置字体大小
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
实例
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
尝试一下 »
在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。
不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。
使用百分比和EM组合
在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：
实例
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。
更多实例
设置字体加粗
这个例子演示了如何设置字体的加粗。
可以设置字体的转变
这个例子演示了如何设置字体的转变。
在一个声明中的所有字体属性
本例演示如何使用简写属性将字体属性设置在一个声明之内。
所有CSS字体属性
| Property | 描述 |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 指定字体的粗细。 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
*请认真填写需求信息，我们会在24小时内与您取得联系。
