指定字体系列
使用 font-family 属性定义文本的字体系列。
使用通用字体系列
如果您希望文档使用无衬线字体，并且您不关心哪种字体，则以下是适当的声明：
body {font-family: sans-serif;}
这样，用户代理将从 sans-serif 字体系列（例如 Helvetica）中选择一种字体并将其应用到 body 元素。 由于继承性，这些字体选择也将应用于 body 元素中包含的所有元素，除非更具体的选择器覆盖它们。
指定字体系列
您还可以通过 font-family 属性设置更具体的字体，而不是使用通用字体系列。
下面的示例为所有 h1 元素设置 Georgia 字体：
h1 {font-family: Georgia;}
这样的规则也会带来另一个问题。 如果用户代理上未安装 Georgia 字体，则 h1 元素只能使用用户代理的默认字体显示。
我们可以通过将特定字体名称与通用字体系列组合来解决此问题：
h1 {font-family: Georgia, serif;}
如果阅读器没有安装 Georgia，但有 Times 字体（衬线字体系列中的一种字体），则用户代理可以使用 Times 作为 h1 元素。 虽然《泰晤士报》与佐治亚州不太相符，但也足够接近了。
因此，我们建议在所有字体系列规则中提供通用的字体系列。 当用户代理难以提供与规则匹配的特定字体时，这提供了选择候选字体的回退。
如果您熟悉字体，您还可以为给定元素指定类似字体的列表。 为此，需要对字体进行优先级排序，然后用冒号连接：
p {font-family: Times, TimesNR, 'New Century Schoolbook',
Georgia, 'New York', serif;}
按照此列表，用户代理按照列出的顺序查找此类字体。 如果列出的字体均不可用，则只需选择可用的衬线字体即可。
使用冒号
正如您已经注意到的，里面的示例使用单个冒号。 仅当字体名称包含一个或多个空格（例如 NewYork）css艺术字，或者字体名称包含 # 或 $ 等符号时，才需要字体系列声明中的破折号。
单冒号或双冒号都是可以接受的。 而且，如果你把一个font-family属性放在HTML的style属性中，你需要使用该属性本身不使用的逗号：
...
字体样式
font-style 属性最常用于指定粗体文本。
该属性具有三个值：
例子
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
斜体和斜体的区别
font-style 非常简单：用于在普通文本、斜体文本和斜体文本之间进行选择。 唯一有点复杂的是显式斜体文本和斜体文本之间的间隙。
粗体（斜体）是一种简单的字体样式，每个字母的结构略有变化，以反映不断变化的形状。 相反，倾斜文本是正常垂直文本的倾斜版本。
一般来说，斜体和斜体文本在网络浏览器中看起来完全相同。
字体变体
font-variant 属性可以设置大的小写字母。
中小写字母不是通常的小写字母，也不是大写字母，这些字母是不同大小的小写字母。
例子
p {font-variant:small-caps;}
粗体
font-weight 属性设置文本的粗细。
使用粗体关键字将文本设置为 Times New Roman。
关键字100~900指定字体的9个粗细级别。 如果字体在外部具有此粗体级别css艺术字，则这些数字将直接映射到预定义级别，其中 100 对应于最细的字体变体，900 对应于最粗的字体变体。 数字400相当于正常，700相当于粗体。
如果元素的粗体设置为粗体，则浏览器将设置比继承值更粗的字体。 相反，关键字 Lighter 会导致浏览器将粗体向下移动而不是向上移动。
例子
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体大小
font-size 属性设置文本的大小。
在网页设计领域，能够管理文本大小非常重要。 另外，您不应调整文本大小以使段落看起来像标题，或使标题看起来像段落。
请仍然使用正确的 HTML 标题，例如使用 - 来标记标题，使用
来标记段落。
字体大小值可以是绝对值或相对值。
绝对值：
相对尺寸：
注意：如果不指定字体大小，则普通文本（例如段落）的默认大小为 16 像素 (16px=1em)。
使用像素设置字体大小
以像素为单位设置文本大小可以让您完全控制文本大小：
例子
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
在 Firefox、Chrome 和 Safari 中，可以在上述情况下调整文本大小，但在 Internet Explorer 中则不行。
事实上，可以通过浏览器的缩放工具来调整文字大小，这实际上是对整个页面（除了文字）的调整。
使用em设置字体大小
如果许多开发人员想要防止在 Internet Explorer 中难以调整文本大小的问题，则使用 em 单位而不是像素。
W3C 建议使用 em 规范单位。
1em 等于当前字体大小。 如果某个元素的 font-size 是 16 像素，那么对于该元素，1em 等于 16 像素。 设置字体大小时，em 的值相对于父元素的字体大小发生变化。
浏览器中的默认文本大小为 16 像素。 因此 1em 的默认大小是 16 像素。
您可以使用以下公式将像素转换为 em：pixels/16=em
（注：16等于父元素的默认字体大小，假设父元素的font-size为20px，所以公式需要改为：pixels/20=em）
例子
h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
在前面的反例中，以 em 为单位的文本大小与前面的反例中以像素为单位的文本大小相同。 但是，如果您使用 em 单位，则可以在所有浏览器中调整文本大小。
不幸的是，IE 仍然存在问题。 调整文本大小时，它会比正常规格更大或更小。
结合比率和 EM
适用于所有浏览器的解决方案是为 body 元素（父元素）设置默认的 font-size 值，其比例如下：
例子
body {font-size:100%;} 我们的代码完美运行。 在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放文本大小。
CSS 字体示例：
设置文本字体 本示例演示如何设置文本字体。
设置字体规格 此示例演示如何设置字体规格。
设置字体样式 本例演示如何设置字体样式。
设置字体变体 本示例演示如何设置字体变体。
设置字体粗细 本示例演示如何设置字体粗细。
一个声明中的所有字体属性 此示例演示如何使用缩写属性在一个声明中设置字体属性。
CSS字体属性属性说明
字体
缩写属性。 该功能是在一个声明中设置所有特定于字体的属性。
字体系列
设置字体系列。
字体大小
设置字体的大小。
字体大小调整
当首选字体不可用时，智能缩放备用字体。 （CSS2.1 已删除此属性。）
字体拉伸
水平拉伸字体。 （CSS2.1 已删除此属性。）
字体样式
设置字体样式。
字体变体
以大写小写或普通字体显示文本。
字体粗细
设置字体粗细。
如果您在阅读文章或观看视频时有任何疑问，请在下方留言或联系我：Q248758228
发表评论