在CSS中，有五个通用字体系列：
- 衬线字体Serif 在每个字母的边缘都有一个小笔划。它们营造出一种正式和优雅的感觉。
- 无衬线字体Sans-serif 线条简洁（没有小笔画）。它们营造出现代简约的外观。
- 等宽字体Monospace - 这里所有字母都具有相同的固定宽度。它们创造了机械的外观。
- 草书字体Cursive 模仿人类手写。
- 幻想字体Fantasy 是装饰性/俏皮字体。
字体系列属性
在 CSS 中，我们使用属性来指定文本的字体。font-family
该属性应保存多个字体名称作为“回退”系统， 以确保浏览器/操作系统之间的最大兼容性。从所需的字体开始，以通用系列结束 （让 浏览器在通用系列中选择类似的字体，如果没有其他字体 可用）。字体名称应用逗号分隔。字体回退可以参考后面的小节。
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
Web 安全字体是在所有浏览器和设备上普遍安装的字体。
备用字体
但是，没有 100% 完全 Web 安全的字体。可能找不到字体或未正确安装字体。
因此，始终使用回退字体非常重要。
这意味如果第一种字体不起作用，浏览器将尝试下一种，依此类推。始终以通用字体系列名称结束列表。在下面的例子里，有三种字体类型：Tahoma，Verdana和 无衬线。第二种和第三种字体是备份，以防找不到第一种。
p {
font-family: Tahoma, Verdana, sans-serif;
}
适用于 HTML 和 CSS 的最佳网页安全字体
以下列表是适用于 HTML 和 CSS 的最佳 Web 安全字体：
具体的字体的效果看CSS Web Safe Fonts
常用字体回退
以下是一些常用的字体回退，按 5 个通用字体系列组织：
字体样式
font-style属性主要用于指定斜体文本。此属性有三个值：
- normal 正常 - 文本正常显示
- italic 斜体 - 文本以斜体显示
- oblique 倾斜 - 文本“倾斜” （斜体与斜体非常相似，但支持较少）
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
字体粗细
font-weight属性指定字体的粗细：
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
字体变体
font-variant属性指定文本是否应 以小型大写字体显示。
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
字体大小
font-size属性设置文本的大小。
能够管理文本大小在网页设计中很重要。但是，你不应使用字体大小调整使段落看起来像标题，或标题看起来像段落。
始终使用正确的 HTML 标记，例如 <h1> - <h6> 作为标题，<p> 用于标题段落。
字体大小值可以是绝对或相对大小。
- 绝对大小：
将文本设置为指定大小，不允许用户在所有浏览器中更改文本大小（由于可访问性原因而损坏）。当输出的物理大小已知时，绝对大小很有用
- 相对大小：
设置相对于周围元素的大小，允许用户在浏览器中更改文本大小
注意：如果未指定字体大小，则普通文本（如段落）的默认大小为 16px （16px=1em）。
像素设置字体大小
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
使用em设置字体大小
为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。
1em 等于当前字体大小。浏览器中的默认文本大小为 16px. 因此，1em 的默认大小为 16px。
可以使用以下公式从像素到em计算大小：pixels/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;
}
我们的代码现在运行良好！它在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放或调整文本大小！
响应式字体大小
文本大小可以用单位设置，即“视口宽度”。vw。这样，文本大小将跟随浏览器窗口的大小：
<h1 style="font-size:10vw">Hello World</h1>
视口是浏览器窗口大小。1vw = 视口宽度的 1%。如果视口宽 50 厘米，则 1vw 为 0.5 厘米。
谷歌字体
如果您不想在HTML中使用任何标准字体，则可以使用Google字体。
Google字体是免费使用的，并且有1000多种字体可供选择。
如何使用谷歌字体
只需在<head>部分添加一个特殊的样式表链接，然后在CSS中引用字体。
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
注意：在 CSS 中指定字体时，请始终在 至少一个回退字体（以避免意外行为）。 因此，在这里您还应该在列表末尾添加一个通用字体系列（如衬线或无衬线）。有关所有可用 Google 字体的列表，请访问操作方法 - Google 字体教程。
使用多种谷歌字体
要使用多种 Google 字体，只需用竖线分隔字体名称 字符 （），如下所示：
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
注意：请求多种字体可能会减慢您的网页速度！ 所以要小心。
设置谷歌字体样式
当然，可以随心所欲地使用CSS来设置谷歌字体的样式！
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
启用字体效果
谷歌还启用了您可以使用的不同字体效果。
首先添加到谷歌 API， 然后将一个特殊的类名添加到将使用特殊的元素中 影响。类名始终以 .effect=effectname
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on Fire</h1>
</body>
要请求多个字体效果，只需使用竖线字符分隔效果名称 （），像这样：|
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>
</body>
CSS 出色的字体配对
以下是创建出色字体配对的一些基本规则：
- 补语
找到相互补充的字体对始终是安全的。
一个好的字体组合应该和谐，不要太相似或太不同。
- 使用字体超系列
字体超系列是一组旨在很好地协同工作的字体。因此，在同一超家族中使用不同的字体是安全的。
例如，Lucida 超系列包含以下字体： Lucida Sans，Lucida Serif，Lucida Typewriter Sans，Lucida Typewriter Serif和Lucida Math。
3.对比为王
两种过于相似的字体通常会发生冲突。然而，对比，完成正确的方式，在每种字体中发挥出最好的效果。
示例：将衬线与无衬线组合是众所周知的组合。
一个强大的超家族包括相同字体的衬线和无衬线变体（例如Lucida和Lucida Sans）。
- 只选择一个主字体
一种字体应该是主字体。这将为字体建立层次结构。这可以通过改变尺寸、重量和颜色来实现。
标题使用“Georgia”字体，文本使用“Verdana”字体，它还坚持网络安全字体标准：
body {
background-color: black;
font-family: Verdana, sans-serif;
font-size: 16px;
color: gray;
}
h1 {
font-family: Georgia, serif;
font-size: 60px;
color: white;
}
在这里Georgia是主字体。
标题使用“Helvetica”字体，文本使用“Garamond”：
使用谷歌字体
标题使用“Merriweather”字体，文本使用“Open Sans”：
标题使用“Ubuntu”字体，文本使用“Lora”：
标题使用“Abril Fatface”字体，文本使用“Poppins”：
标题使用“Cinzel”字体，文本使用“Fauna One”字体：
标题使用“Fjalla One”字体，文本使用“Libre Baskerville”：
标题使用“Space Mono”字体，文本使用“Muli”字体：
标题使用“Spectral”字体，文本使用“Rubik”字体：
标题使用“Oswald”字体，文本使用“Noto Sans”：
为了缩短代码，还可以在一个属性中指定所有单独的字体属性。
font属性是以下属性的简写属性：
font-style
font-variant
font-weight
font-size/line-height
font-family
font-size和font-family是必需的。如果缺少其他值之一，则使用其默认值。
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}
网友评论