CSS 中提供了一系列用于设置文本字体样式的属性，比如更改字体，控制字体大小和粗细等等。
font-family：设置字体； font-style：设置字体的风格，例如倾斜、斜体等； font-weight：设置字体粗细；
font-size：设置字体尺寸； font-variant：将小写字母转换为小型大写字母；
font-stretch：对字体进行伸缩变形（使用较少，并且主流浏览器都不支持）；
font：字体属性的缩写，可以在一个声明中设置多个字体属性。
1. font-family
font-family 属性用来设置元素内文本的字体。由于字体的种类成千上万，而且有些还不是免费的，因此我们的电脑上几乎不可能拥有所有的字体。为了最大程度的保证我们设置的字体能够正常显示，可以通过 font-family 属性定义一个由若干字体名称组成的列表，字体名称之间使用逗号,分隔，浏览器会首先尝试列表中的第一个字体，如果不支持则尝试下一个，以此类推。
font-family 属性的可选值如下：
下表中列举了一些常用的字体族（generic-family）：
使用 font-family 属性为 HTML 元素设置字体样式：
运行结果：
注意：如果字体族或字体名称中包含空格或多个单词，则必须将它们使用引号包裹起来，例如"Times New Roman"、“Courier New”、“Segoe UI” 等，如果是在元素的 style 属性中使用则必须使用单引号。
2. font-style
font-style 属性用来设置字体的样式，例如斜体、倾斜等，该属性的可选值如下：
【示例】使用 font-style 属性设置字体的样式：
运行结果：
乍看之下，您可能觉得 italic 和 oblique 的效果是一样的。其实不然，italic 显示的字体的斜体版本，而 oblique 则只是一个倾斜的普通字体。
3. font-weight
font-weight 属性能够设置字体的粗细，可选值如下：
100、200、300、400、500、600、700、800、900 由细到粗的设置字体粗细，100 为最细的字体，400 等同于 normal，700 等同于 bold
inherit 从父元素继承字体的粗细
【示例】使用 font-weight 属性设置字体粗细：
运行结果：
4. font-size
font-size 属性用来设置字体的大小（字号），可选值如下：
【示例】使用 font-size 属性设置字体的大小：
运行结果：
5. font-variant
font-variant 属性可以将文本中的小写英文字母转换为小型大写字母（转换后的大写字母与转换前小写字母的大小相仿，所以称之为小型大写字母）。font-variant 属性的可选值如下：
运行结果：
6. font
在使用 font 属性时，有以下几点需要注意：
使用 font 属性时必须按照如上所示的顺序，并且 font-size 和 font-family 两个属性不可忽略；
font 属性中的每个参数仅允许设置一个值，除 font-size 和 font-family 属性外，被忽略的属性将被设置为各自的默认值；
若要定义 line-height 属性，则需要使用斜线/将 font-size 和 line-height 属性分开。
使用 font 属性同时定义多个字体效果：
运行结果：
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/14261.html