CSS - 字体

字体是一组具有一致设计和样式的文本字符。它包括字体中字符的形状、大小、重量和其他属性。

字体用于在各种媒体（如印刷品、数字屏幕和图形设计）中显示和表示文本。
可以选择字体来传达特定的情绪或审美，增强可读性，或与品牌的身份保持一致。
字体在沟通和设计中起着至关重要的作用。
字体可以唤起不同的情感，并向观众传达特定的信息。

本章演示如何设置内容的字体，这些字体在 HTML 元素中可用。您可以设置元素的以下字体属性 -

font：它是可以在一个声明中传递的所有其他与字体相关的属性的简写。
font-family：指定要用于文本的字体系列或字体系列列表。
font-feature-settings：控制 OpenType 字体中的高级排版功能，例如花体、小写字母和连字。
font-kerning：确定特定字母对的间隔方式。
font-language-override：覆盖特定语言的字体行为。
font-optical-sizing：设置是否应优化文本的呈现以不同大小查看。
font-palette：允许您指定字体中包含的各种调色板之一。
font-size：设置文本的大小。它可以以像素（px）、点（pt）、百分比（%）、ems （em）或其他单位指定。
font-size-adjust：根据当前字体大小设置小写字母的大小。
font-stretch：设置展开的、压缩的或普通的字体。
font-style：指定文本的样式，例如“斜体”、“斜体”或“正常”。
font-weight：确定文本的粗细或粗体。常见的值是“normal”和“bold”，但也可以使用数值（例如，100、200、300）和关键字（例如，“lighter”、“bold”）。
font-synthesis：确定浏览器是否应合成字体系列中缺少的粗体、斜体和/或小写字体。
font-synthesis-small-caps：确定浏览器是否应合成字体系列中缺少的小写字母字体。
font-synthesis-style：确定浏览器是否应合成字体系列中缺少的倾斜字体。
font-synthesis-weight：确定浏览器是否应合成字体系列中缺少的粗体字体。
font-variant：控制文本中小写字母的使用。值可以是“正常”或“小盘股”。
font-variant-alternates：控制备用字形的使用。
font-variant-caps：控制大写字母的备用字形的使用。
font-variant-east-asian：控制东亚文字（如中文和日文）的备用字形的使用。
font-variant-ligatures：控制元素的文本内容，决定应使用哪种连字或上下文形式。
font-variant-numeric：控制数字、分数和序号标记的备用字形的使用。
font-variant-position：控制备用的较小字形的使用，定位为上标或下标。
font-variation-settings：指定可变字体特征的四个字母的轴名称。
line-height：设置行框的高度。还设置文本行之间的距离。

CSS 字体速记

为了缩短代码，CSS 允许 font 的速记属性，其中可以在一个声明中指定以下所有属性：

font 属性是以下项的简写：

font-style
font-variant
font-weight
font-stretch
font-size
line-height
font-family

要记住的要点：

属性 font-style、font-variant 和 font-weight 必须始终位于 font-size 之前。
normal 和 small-caps 值只能使用属性 font-variant 指定。
font-stretch 属性只能是单个关键字值。
属性 line-height 必须遵循属性 font-size，前面是“/”。例如：“20px/3”。
属性 font-family 必须是指定的最后一个值。

font-family 和 font-size 的值是必需的，如果缺少任何值，则使用默认值。

系统字体值

有一个系统字体值列表，如下所示：

caption：用于带字幕的控件，例如按钮、下拉列表等。
icon：用于标签图标
menu：用于菜单，例如下拉菜单或列表菜单。
message-box：在对话框中使用。
small-caption：用于标记小控件。
status-bar：用于窗口状态栏。
带前缀的系统字体关键字：由浏览器实现，例如 -moz-window、-moz-document、-moz-desktop、-moz-info、-moz-dialog、-moz-button、-moz-pull-down-menu、-moz-list 和 -moz-field。

CSS 字体 - 具有多个值

下面是一个示例：


<html>
<head>
<style>
	 p {
			border: 2px solid blue;
	 }
</style>
</head>
<body>
	 <h2>Font Shorthand Property</h2>
	 <p style = "font: oblique normal bold 20px Arial, sans-serif;">
			Shorthand Property Font
	 </p>
</body>
</html>

CSS 字体 - 字体家族

选择合适的字体系列非常重要，因为它会影响和反映不同的风格、情感和可读性。每种分类都有自己的内涵和用法。

例如，虽然衬线字体在字符末尾有小修饰或笔画，但无衬线字体具有更简洁、更现代的外观。

选择正确的字体是平面设计和品牌推广的一个重要方面。它可以帮助建立视觉识别并加强所传达的信息。

此属性的可能值如下所示：

<family-name>：字体家族的名称。带空格的名称应用引号括起来。

<generic-name>：这是回退机制。应该是字体系列名称列表中的最后一个值。

serif：衬线体，带有结束笔画、喇叭形或锥形末端的字形。示例：Lucida Bright、Palatino 等。
sans-serif：带有平淡笔画尾尾的字形。示例：Open Sans、Lucida Sans 等。
monospace：相同宽度的字形。例如：Consolas, Monaco, monospace等
cursive：草书字体中的字形，带有部分或完全连接的笔画。示例：Brush Script MT、Lucida Calligraphy 等。
fantasy：包含俏皮的字符表示的装饰字体。示例：Curlz MT、fantasy等。
system-ui：取自任何给定平台上的默认用户界面字体的字形。
ui-serif：默认用户界面（UI）衬线字体
ui-sans-serif：默认 UI sans-serif 字体
ui-monospace：默认 UI 等宽字体。
ui-rounded：具有圆形功能的默认 UI 字体。
math：表示数学运算的字体，如上标、下标、括号、嵌套表达式等。
Emoji：Emoji表情符号渲染字体。
fangsong：介于 serif 和 cursive 之间的汉字样式。

下面是一个示例：


<html>
<head>
<style>
	 p {
			padding: 5px;
			border: 2px solid blue;
	 }
</style>
</head>
<body>
	 <h2>Font-family</h2>
	 <p style = "font-family: 'Times New Roman', Times, serif;">
			The text will be either 'Times New Roman', Times, or serif.
	 </p>
	 <p style = "font-family: Arial, Helvetica, sans-serif;">
			The text will be either 'Arial', Helvetica, or sans-serif.
	 </p>
</body>
</html>

CSS 字体 - 字体功能设置

font-feature-settings 属性由 CSS 提供，用于控制 OpenType 字体中的高级排版功能，例如花纹、小写字母和连字。

注意：不应使用 font-feature-settings 属性来启用小写字母。它只应在 OpenType 字体的特殊情况下使用。

此属性的可能值如下所示：

normal：默认值。默认字体设置已布局。
<feature-tag-value>：指定为元组，用空格分隔，具有标签名称和可选值：
标签名称 始终是四个 ASCII 字符的 <string>，否则无效。
可选值 可以是整数或关键字 on（1）或 off（0）。默认值为 0。

语法


/* use small-cap */
	font-feature-settings: "smcp" on;

/* convert both upper and lowercase to small caps */
	font-feature-settings: "c2sc", "smcp";

/* use zeros with a slash through them to differentiate from "O" */
	font-feature-settings: "zero";

/* enable historical forms */
	font-feature-settings: "hist";

/* enable common ligatures */
	font-feature-settings: "liga" 1;

/* enable tabular (monospaced) figures */
	 font-feature-settings: "tnum";

/* enable automatic fractions */
	 font-feature-settings: "frac", on;

/* use the second available swash character */
	 font-feature-settings: "swsh" 2;

CSS 字体 - 具有 font-feature-settings 属性

下面是一个示例：


<html>
<head>
<style>
	 div{
			border: 1px solid red;
			margin: 5px;
			width: 300px;
	 }
	 p.allcaps{
			padding: 8px; font-weight: bold; font-style: italic; font-feature-settings: 'c2sc', 'smcp';
	 }
	 p.small-caps{
			padding: 8px; font-weight: bold; font-variant:small-caps; font-feature-settings: 'smcp', off;
	 }
</style>
</head>
<body>
	 <h2>Font feature settings</h2>
	 <div>
			<p class="allcaps">
				 Font feature settings-all caps
			</p>
			<p class="small-caps">
				 Font feature settings-small caps
			</p>
	 </div>
</body>
</html>

CSS Fonts - 字体字距调整

CSS 提供的 font-kerning 属性在确定特定字母对的间隔方式时非常有用。

每个字符的左右边缘都有一个固定的空间，当两个字符并排放置时，它们的侧面方位将从其实际空间相加。

为了协调字符的这些侧方位，使用了 font-kerning 属性。您可以启用或禁用此属性。

此属性的可能值如下所示：

auto：浏览器决定是否应应用字体字距调整。
normal：必须使用存储在字体中的字体字距调整信息。
none：禁用存储在字体中的字体字距调整信息。

CSS Fonts - 使用 font-kerning 属性

下面是一个示例：


<html>
<head>
<style>
	 div {
			font-size: 2rem;
			font-family: serif;
	 }
	 #nokern {
			font-kerning: none;
	 }
	 #kern {
			font-kerning: normal;
	 }
	 #auto {
			font-kerning: auto;
	 }
</style>
</head>
<body>
	 <h2>Font kerning</h2>
	 <div id="kern">AV</div>
	 <div id="nokern">AV</div>
	 <div id="auto">AV</div>
</body>
</html>

CSS Fonts - 字体语言覆盖

CSS 的 font-language-override 属性用于覆盖特定语言的字体行为。

此属性的可能值如下所示：

normal：指定浏览器使用 lang 属性指定的语言的字形。这是默认值。
<string>：指定浏览器使用 <string> 指定的语言的字形。例如：“KOR”代表韩语，“ENG”代表英语，“DAN”代表丹麦语等。

CSS Fonts - 使用 font-language-override 属性

下面是一个示例：


<html>
<head>
<style>
	.my-text {
		font-family: Arial, sans-serif;
		font-language-override: "TRK";
	}
</style>
</head>
<body>
	<p>This is some text with language-specific glyphs: ğüşöçİ</p>
	<p class="my-text">This is some text with language-specific glyphs: ğüşöçİ</p>
</body>
</html>

CSS Fonts - 字体光学大小

CSS 的 font-optical-sizing 属性用于设置是否应优化文本的呈现以在不同大小下查看。

此属性的可能值如下所示：

none：未修改字形的形状以使浏览器获得最佳查看效果。
auto：修改了字形的形状，以便浏览器进行最佳查看。

默认情况下，字体的光学大小是启用的。当使用光学大小时，较小的文本大小以更粗和更大的字体显示，而较大的文本以更精细的方式显示。

CSS Fonts - 带有 font-optical-sizing 属性

下面是一个示例：


<html>
<head>
	 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap">
<style>
	 p {
			margin-bottom: 5px;
			border: 2px solid red;
	 }
	 .eng {
			font-family: "Montserrat", sans-serif;

	 }
	 .opt-no {
			font-optical-sizing: none;
	 }
	 .opt-yes {
			font-optical-sizing: auto;
	 }
</style>
</head>
<body>
	 <h3>Optical sizing -none</h3>
	 <p class="eng opt-no">Check the optical sizing</p>

	 <h3>Optical sizing -auto</h3>
	 <p class="eng opt-yes">Check the optical sizing</p>
</body>
</html>

CSS Fonts - 字体调色板

CSS 提供的 font-palette 属性允许您指定字体中包含的各种调色板之一。

此属性的可能值如下所示：

normal：设置默认调色板或字形着色。将呈现索引 0 处的调色板。
light：设置与“light”匹配的第一个调色板。如果未找到匹配项，则其行为与正常情况类似。
dark：设置与“dark”匹配的第一个调色板。如果未找到匹配项，则其行为与正常情况类似。
<palette identifier>：允许使用 @font-palette-values at 规则指定您自己的调色板。

CSS Fonts - 带有 font-palette 属性

下面是一个示例：


<html>
<head>
<style>
	 @import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
	 @font-palette-values --bungee-more-spicy {
			font-family: "Bungee Spice";
			override-colors:
			0 Orange,
			1 Yellow;
	 }
	 h2 {
			font-family: "Bungee Spice";
	 }
	 h2.more-spicy {
			font-palette: --bungee-more-spicy;
	 }
</style>
</head>
<body>
	 <h2>Font face</h2>
	 <h2 class="more-spicy">Hot & burning</h2>
</body>
</html>

CSS Fonts - 字体大小

字体大小是指字符相对于文本基线的高度。较大的字体通常用于标题或标题以吸引注意力，而较小的字体则适用于正文文本或标题以确保可读性。

CSS 中 font-size 的可能值为：

绝对大小关键字：这些值基于 uesr 的字体大小（中等）的默认大小。它包括：

xx-small
x-small
small
medium
large
large
x-large
xx-large
xxx-large

相对大小关键字：这些值相对于父元素的字体大小而言相对较大或较小。它包括：

larger
smaller

<length>：这些是预定义的正值<length>值。它包括 em、ex、rem、px、in 等。

<percentage>：相对于父元素的字体大小的正值 <percentage>。

math：它是数学元素的 font-size 相对于父元素的 font-size 的计算值。

CSS Fonts - 使用 font-size 属性

下面是一个示例：


<html>
<head>
<style>
	 p {
			padding: 5px;
			border: 2px solid blue;
	 }
</style>
</head>
<body>
	 <h2>Font-size</h2>
	 <p style = "font-size: large;">
			The font-size is large.
	 </p>
	 <p style = "font-size: 15px">
			The font-size is 15px.
	 </p>
	 <p style = "font-size: x-small;">
			The font-size is x-small.
	 </p>
	 <p style = "font-size: 60%;">
			The font-size is 60%.
	 </p>
	 <p style = "font-size: 2vw;">
			The font-size 2vw (viewport width). Change the viewport size to see the effect.
	 </p>
</body>
</html>

CSS Fonts - 字体大小调整

font-size-adjust 属性可用于指定字体的纵横比（数值比率），该值控制字体的 x 高度（小写字母的高度）。

这可确保回退字体相对于指定字体保持一致的视觉大小和比例。

font-size-adjust 属性可以采用以下值之一：

<number>：指定一个数值，该值表示纵横比值，该值是字体的 x 高度与 font-family 属性指定的字体 x 高度之比。

none：指定不根据 x 高度调整字体大小。

<keyword>：指定要规范化的字体度量：

ex-height：x-height 除以 font-size。
cap-height：使用 font-height by font-size。
ch-width：字体的水平窄间距被归一化。
ic-width：字体的水平宽间距被归一化。
ic-height：字体的垂直宽间距被归一化。

浏览器对 font-size-adjust 的支持可能会有所不同，并且在现代 Web 开发中并未广泛使用。“Firefox”和 Safari 浏览器支持此属性。

CSS Fonts - 带有 font-size-adjust 属性

下面是一个示例（在Firffox或Safari浏览器上检查结果）：


<html>
<head>
<style>
	 p {
			padding: 5px;
			border: 2px solid blue;
	 }
	 p.p1 {
			font-family: 'Courier New', Courier, monospace;
			font-size-adjust:none;
	 }
	 p.p2 {
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 20pt;
			font-size-adjust: 0.6;
	 }
	 p.p3 {
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			font-size: 20pt;
			font-size-adjust: ex-height 0.6;
	 }
</style>
</head>
<body>
	 <h2>Font-size</h2>
	 <p class="p1">
			The font-size-adjust is none.
	 </p>
	 <p class="p2">
			The font-size-adjust is 0.6 on font-size 20pt.
	 </p>
	 <p class="p3">
			The font-size-adjust is ex-height and 0.6 on font-size 20pt.
	 </p>
</body>
</html>

CSS 字体 - 字体拉伸

某些字体系列提供了额外的面孔，在这些面孔中，字符可以比其正常外观更窄或更宽。font-stretch 属性允许调整文本的宽度（压缩或扩展）。

注意：如果您使用的字体不支持压缩或扩展形式，则 font-stretch 属性将不起作用。

此属性的可能值如下所示：

normal：指定普通字体。
semi-condensed, condensed, extra-condensed, ultra-condensed:：指定比正常字体更压缩的字体。
semi-expanded, expanded, extra-expanded, ultra-expanded: 指定比正常情况更扩展的字体。
<percentage>：百分比值，可以是 50% 到 200%。
initial：将值设置为初始值。
inherit：从父值继承值。

关键字和相应百分比值的映射：

关键词	百分比
ultra-condensed	50%
extra-condensed	62.5%
condensed	75%
semi-condensed	87.5%
normal	100%
semi-expanded	112.5%
expanded	125%
extra-expanded	150%
ultra-expanded	200%

CSS Fonts - 使用 font-stretch 属性

下面是一个示例：


<html>
<head>
<style>
	 body {
			font-family: Arial, sans-serif;
	 }
</style>
</head>
<body>
	 <h2>Font-stretch</h2>
	 <p style = "font-stretch: normal;">
			Normal
	 </p>
	 <p style = "font-stretch: condensed;">
			Condensed
	 </p>
	 <p style = "font-stretch: expanded;">
			Expanded
	 </p>
	 <p style = "font-stretch: 170%;">
			170% stretched
	 </p>
</body>
</html>

CSS Fonts - 使用 font-style 属性

字体样式用于更改文本的外观或样式。font-style 属性用于指定所选文本的字体样式。

CSS 中提供了三种主要的字体样式：

normal：默认字体样式，文本正常显示，没有任何倾斜或倾斜。

italic：文本以斜体样式显示，略微向右倾斜。

oblique：文本看起来类似于斜体，但具有更夸张的倾斜度或棱角分明。

oblique <angle>：带有角度的斜文本，用于指定文本的倾斜度：

如果没有可用的倾斜字体，浏览器将按指定角度倾斜文本。
角度的有效值是介于 -90 度和 90 度之间的度数值（含 -90 度）。
如果未指定角度，则浏览器将设置 14 度。
正角度值将文本倾斜到行尾。
负角度值使文本向开头倾斜。
较大的角度值是首选。

这些字体样式可以使用 CSS 选择器应用于任何 HTML 元素，并且可以与其他字体属性（如 font-family、font-size 等）结合使用，以创建所需的文本样式。

注意：只有 firefox 浏览器兼容 font-style：oblique <angle> 。

下面是一个示例：


<html>
<head>
<style>
	 p {
			padding: 5px;
			border: 2px solid blue;
	 }
</style>
</head>
<body>
	 <h2>Font-style</h2>
	 <p style = "font-style: normal;">
			The text will be normal.
	 </p>
	 <p style = "font-style: italic;">
			The text will be italic.
	 </p>
	 <p style = "font-style: oblique;">
			The text will be obligue.
	 </p>
	 <p style = "font-style: oblique 45deg;">
			The text will be obligue and slanted 45deg.
	 </p>
</body>
</html>

CSS Fonts - 带有 font-weight 属性

字体粗细是指字符的粗细或粗体。字体系列中的不同权重可用于在文本中创建视觉层次结构或强调。

font-weight 的可能值如下：

normal：字体粗细正常。相当于 400。
bold：字体粗细粗体。相当于 700。
<number>：介于 1 和 1000 之间的值定义字体的粗细。较大的数字表示比较小的数字更粗（或与较小的数字一样粗体）的权重。
lighter：相对于父元素的字体粗细，字体粗细较轻。
bolder：相对于父元素的字体粗细，字体粗细更粗。

下面是一个示例：


<html>
<head>
<style>
	 p {
			padding: 5px;
			border: 2px solid blue;
	 }
</style>
</head>
<body>
	 <h2>Font-weight</h2>
	 <p style = "font-weight: normal;">
			The font-weight is normal.
	 </p>
	 <p style = "font-weight: bold;">
			The font-weight is bold.
	 </p>
	 <p style = "font-weight: 500;">
			The font-weight is 500 (medium).
	 </p>
</body>
</html>

CSS Fonts - 具有 font-synthesis 属性

font-synthesis 属性确定浏览器是否应合成字体系列中缺少的粗体、斜体和/或小写字体。

此属性是以下属性的简写：

font-synthesis-weight
font-synthesis-style
font-synthesis-small-caps

此属性的可能值如下所示：

none：表示无需合成粗体、斜体或小写字体。
weight：表示浏览器可能会合成缺失的粗体字体。
style：表示浏览器可能会合成缺少的斜体字体。
small-caps：表示浏览器可能会合成缺失的小写字母字体。

许多字体包括粗体和斜体变体，很少有字体也可能有小写字母变体，但是用于中文、韩语、日语等语言的字体没有这些变体，因此合成它们可能会使它们难以辨认。因此，在这些情况下，建议禁用默认字体合成。

下表显示了传递给速记属性 font-synthesis 的值以及传递给其手写属性的相应值：

font-synthesis 值	font-synthesis-weight 值	font-synthesis-style 值	font-synthesis-small-caps 值
none	none	none	none
weight	auto	none	none
style	none	auto	none
small-caps	none	none	auto
weight style	auto	auto	none
weight small-caps	auto	none	auto
style small-caps	none	auto	auto
weight style small-caps	auto	auto	auto

下面是一个示例：


<html>
<head>
	 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap">
	 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap">
<style>
	 p {
			margin-bottom: 5px;
			border: 2px solid red;
	 }
	 .eng {
			font-family: "Montserrat", sans-serif;
	 }
	 .chi {
			font-family: "Ma Shan Zheng";
	 }
	 .no-syn {
			font-synthesis: none;
	 }
	 .syn {
			font-synthesis: style weight;
	 }
</style>
</head>
<body>
	 <h3>DEFAULT</h3>
	 <p class="eng">
			Supports <strong>bold</strong> and <em>italic</em>.
	 </p>
	 <p class="chi"><strong>加粗</strong>和<em>斜体</em> 支援的字體.</p>
	 <h3>DISABLED SYNTHESIS</h3>
	 <p class="eng no-syn">
			Do not support <strong>bold</strong> and <em>italic.</em>
	 </p>
	 <h3>DISABLED SYNTHESIS</h3>
	 <p class="chi no-syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
	 <h3> SYNTHESIS IS ENABLED </h3>
	 <p class="eng syn">
			Supports <strong>bold</strong> and <em>italic</em>.
	 </p>
	 <p class="chi syn"><strong>加粗</strong>和<em>斜体</em> 支援的字體.</p>
</body>
</html>

CSS Fonts - 使用 font-variant 属性

CSS 中的 font-variant 是一个速记属性，用于指定文本是否应以小写字母呈现。它可以具有以下值：

font-variant 是以下属性的简写：

font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-position

font-variant 的可能值（根据 CSS 级别 2.1）：<>

normal：这是默认值，它指定文本应正常呈现，没有任何特殊变体。

small-caps：此值指定文本应以小写字母呈现。使用的字体必须具有可用的小写字母变体，否则它将回退到正常呈现。

none：将值 font-variant-ligatures 设置为 none。

<common-lig-values>、<discretionary-lig-values>、<historical-lig-values>、<contextual-alt-values>

common-ligatures
no-common-ligatures
discretionary-ligatures
no-discretionary-ligatures
historical-ligatures
no-historical-ligatures
contextual-ligatures
no-contextual-ligatures

与 font-variant-ligatures longhand 属性相关的关键字和函数：

stylistic()
styleset()
character-variant()
swash()
ornaments()
annotation()
historical-forms

与 font-variant-caps longhand 属性相关的关键字和函数：

small-caps
all-small-caps
petite-caps
all-petite-caps
unicase
titling-caps

<numeric-figure-values>， <numeric-spacing-values>， <numeric-fraction-values>， ordinal，斜线零：指定与 font-variant-numeric longhand 属性相关的关键字：

lining-nums
oldstyle-nums
proportional-nums
tabular-nums
diagonal-fractions
stacked-fractions
ordinal
slashed-zero

<east-asian-variant-values>， <east-asian-width-values>， ruby：指定与 font-variant-east-asian longhand 属性相关的关键字：

jis78
jis83
jis90
jis04
simplified
traditional
full-width
proportional-width
ruby

指定与 font-variant-position longhand 属性相关的关键字和函数：

sub
super

指定与 font-variant-emoji longhand 属性相关的关键字和函数：

text
emoji
unicode

下面是一个示例：


<html>
<head>
<style>
	 p {
			padding: 5px;
			border: 2px solid blue;
	 }
</style>
</head>
<body>
	 <h2>Font-variant</h2>
	 <p style = "font-variant: normal;">
			The text will be normal.
	 </p>
	 <p style = "font-variant: small-caps;">
			The text will be in small-caps.
	 </p>
</body>
</html>

CSS Fonts - 使用 font-variation-settings 属性

CSS 中的 font-variation-settings 属性用于指定可变字体的变体设置。可变字体是一种可以具有可调整属性（例如粗细、宽度和倾斜度）的字体，从而可以对字体的外观进行更精细的控制。

此属性允许您使用轴标记和数值定义这些字体变体的值。

此属性的可能值如下所示：

normal：文本根据默认设置呈现。

<string> <number>：

<string>表示为 4 个 ASCII 字符。
如果 <string>的值大于或少于四个字符，则该值将变为无效。
<number> 表示要设置的轴值。
<number> 可以是负数或小数，具体取决于所选字体的值范围。

仅当未使用基本属性 font-weight 和 font-style 时，才应使用此属性。由于使用此属性传递的值将始终覆盖使用基本字体属性（如 font-weight 等）传递的值。

CSS 字体 - 可变字体轴

可变字体轴是可变字体的可自定义尺寸或属性。一些常见的轴包括粗细、宽度和斜体。

有两种类型的可变字体轴：自定义字体轴和注册字体轴。

下表显示了已注册的轴及其 CSS 属性：

Axis	CSS 属性
wght	font-weight
wdth	font-stretch
slnt (slant)	font-style:oblique <angle>
ital	font-style:italic
opsz	font-optical-sizing

注意：您通常可以在字体的文档或字体创建者提供的规格中找到此信息。获得轴信息后，可以使用 font-variation-settings 属性定义和控制字体变体。

注意：您的操作系统必须是最新的，才能在网页中使用这些可变字体。

CSS Fonts - 使用 font-variation-settings 属性

下面是一个示例：


<html>
<head>
<style>
	 .container1 * {
			font-weight: 625;
	 }
	 .container2 * {
			font-variation-settings: 'wght' 625;
	 }
	 .container3 * {
			font-variation-settings: 'wght' 200;
	 }
</style>
</head>
<body>
	 <div class="container container1">
			<p>Variation Setting - Weight</p>
	 </div>
	 <div class="container container2">
			<p>Variation Setting - Weight</p>
	 </div>
	 <div class="container container3">
			<p>Variation Setting - Weight</p>
	 </div>
</body>
</html>

CSS 行高

line-height 属性设置行框的高度，并设置文本行之间的距离。它指定元素内线框的最小高度。

此属性的可能值如下所示：

<number>：一个无单位的数字，乘以元素的字体大小。设置行高的最优选方法。
<length>：任意长度单位值，如px、pt等。以 em 为单位给出的值可能会产生意想不到的结果。
<percentage>：相对于元素的字体大小。可能会产生意想不到的结果。
normal：关键字“normal”作为值。取决于元素的字体系列和用户的浏览器设置。

建议使用 1.5 的最小值来表示 paragrapgh 的行高，因为放大会相对增加行高的值，使其易于阅读。

CSS 字体 - 具有 line-height 属性

下面是一个示例：


<html>
<head>
<style>
	 div{
			border: 1px solid red;
			margin: 5px;
			width: 300px;
	 }
</style>
</head>
<body>
	 <h2>Line Height of div</h2>
	 <div style="line-height: normal;">Normal line height</div>
	 <div style="line-height: 50%;">Percentage line height</div>
	 <div style="line-height: 3em;">Length line height</div>
	 <div style="line-height: 1.6;">Number line height</div>
</body>
</html>

CSS Fonts - Google 字体

除了 HTML 中可用的标准字体外，您还可以利用 Google 字体的好处。Google 提供了 freen 和 open source 字体系列，数量超过 1000 种。

为了使用 Google 字体，您需要在 <head> 部分添加样式表链接，并在 CSS 中使用相应的字体。以下是相同的语法：

添加 Google 字体的语法


<head>
	 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans|Sofia">
<style>
	 body {
			font-family: "Open Sans", sans-serif;
	 }
</style>
</head>

要记住的要点：

始终至少列出一种后备字体，以防浏览器不支持指定的字体。
如果您希望使用多个 Google 字体，请用竖线字符（|）分隔字体名称。
Google 字体也可以使用 CSS 属性设置样式，例如 font-size 等。
可以使用属性 font-effect-* 向 Google 字体添加特殊效果，其中 * 可以是任何效果名称，例如火焰、霓虹灯、阴影等。

演示如何向 Google 字体添加效果的示例：


<html>
<head>
	 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans|Sofia&effect=fire|neon|shadow-multiple"">
<style>
	 body {
			font-family: "Open Sans", sans-serif;
			font-size: 25px;
	 }
</style>
</head>
<body>
	 <h1 class="font-effect-neon">Google Font</h1>
	 <h1 class="font-effect-fire">Google Font</h1>
	 <h1 class="font-effect-shadow-multiple">Google Font</h1>
</body>
</html>

CSS 字体 - 回退字体

回退字体是在特定字体不可用或无法在设备或 Web 浏览器上显示时使用的备份字体。

回退字体是根据它们在样式或设计上与所需字体的相似性来选择的，从而确保文本保持可读性并保持其预期外观的某种外观。

回退字体的一些示例如下：

Arial：常用的后备字体，类似于 Helvetica。
Times New Roman：专为易于阅读而设计，通常用于印刷和数字媒体。
Verdana：Verdana 是一种无衬线后备字体，专为在屏幕上的可读性而设计。
Georgia：这种衬线体后备字体通常用于 Web 上的正文文本。
Courier New：Courier New 通常用于等宽文本，是需要固定宽度字体时通常选择的后备字体。

CSS 字体 - 摘要

以下是样式字体的 CSS 属性列表：

属性	描述
font	速记字体属性。
font-family	指定要用于文本的字体系列或字体系列列表。
font-feature-settings	控制 OpenType 字体中的高级排版功能。
font-kerning	确定特定字母对的间隔方式。
font-language-override	覆盖特定语言的字体行为。
font-optical-sizing	设置是否应优化文本的呈现以不同大小进行查看。
font-palette	允许使用字体中包含的各种调色板之一。
font-size	设置文本的大小。
font-size-adjust	指定字体的纵横比值（数值比率），用于控制其 x 高度。
font-stretch	调整文本的宽度（压缩或扩展）。
font-style	指定文本的样式，例如“斜体”、“斜体”或“正常”。
font-weight	设置文本的粗细或粗体。
font-synthesis	速记字体合成属性。
font-synthesis-small-caps	确定浏览器是否应合成字体系列中缺少的小写字体
font-synthesis-style	确定浏览器是否应合成字体系列中缺少的倾斜字体。
font-synthesis-weight	确定浏览器是否应合成字体系列中缺少的粗体字体。
font-variant	控制文本中小写字母的使用
font-variant-alternates	控制备用标志符号的使用。
font-variant-caps	控制大写字母的备用字形的使用。
font-variant-east-asian	控制东亚文字（如中文和日文）的备用字形的使用。
font-variant-ligatures	控制元素的文本内容，即应使用哪种连字或上下文形式。
font-variant-numeric	控制数字、分数和序号标记的备用字形的使用。
font-variant-position	控制定位为上标或下标的备用较小字形的使用。
font-variation-settings	指定可变字体特征的四个字母的轴名称。
line-height	设置行框的高度。还设置文本行之间的距离。

打印本页