CSS - 字体：初学者的全面指南

你好，有抱负的网页开发者们！今天，我们将深入探讨CSS字体的奇妙世界。作为你友善的邻居电脑老师，我将一步步引导你完成这个旅程。所以，拿起一杯咖啡（或者茶，如果你喜欢的话），让我们开始吧！

CSS 字体简介

在我们深入研究细节之前，让我们先谈谈为什么字体如此重要。想象一下，你正在阅读一本完全用Comic Sans字体写的书——并不是最愉快的体验，对吧？这就是为什么为你的网站选择正确的字体至关重要。这就像为初次约会挑选完美的服装——你希望留下好印象！

CSS 字体简写属性

让我们从一个便捷的小技巧开始，它叫做字体简写。它就像一把瑞士军刀一样的字体样式工具——紧凑且多用途！

body {
font: italic small-caps bold 16px/2 Arial, sans-serif;
}

这一行代码一次性设置了多个字体属性。让我们分解一下：

• italic：字体样式
• small-caps：字体变体
• bold：字体重量
• 16px：字体大小
• 2：行高
• Arial, sans-serif：字体家族

很酷吧？就像点一份套餐而不是单个项目！

CSS 字体 - 使用多个值

有时，一个字体是不够的。这时，多个值就派上用场了：

p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}

这就好比有一个备用计划。如果“Trebuchet MS”不可用，它会尝试Verdana，如果那也失败了，它会使用任何可用的无衬线字体。

CSS 字体 - 字体家族

说到字体家族，让我们更深入一些：

h1 {
font-family: Georgia, serif;
}
p {
font-family: Arial, sans-serif;
}

在这里，我们为标题和段落使用了不同的字体家族。这就好比给你的标题穿上了一套高档西装，而让段落保持休闲装！

CSS 字体 - 字体特征设置

现在，让我们用字体特征设置来玩点花哨的：

p {
font-feature-settings: "smcp" on, "swsh" 2;
}

这激活了小型大写字母和设置花体到第二级。这就好比给你的字体赋予了超级能力！

CSS 字体 - 使用 font-feature-settings 属性

让我们看看另一个字体特征设置的例子：

.stylish-text {
font-feature-settings: "liga" 1, "dlig" 1, "hlig" 1;
}

这启用了标准连字、可选连字和历史连字。这就好比把你的文本变成了书法杰作！

CSS 字体 - 字距调整

字距调整关乎字符之间的空间：

.kerned-text {
font-kerning: normal;
}

这确保了字母之间正确的间距。这就好比给你的文本留出了呼吸空间！

CSS 字体 - 字体语言覆盖

有时，你需要覆盖语言设置：

.japanese-text {
font-language-override: "JAN";
}

这告诉浏览器使用特定于日语的符号变体。这就好比告诉你的文本用日语说话！

CSS 字体 - 字体光学大小调整

光学大小调整根据字体的大小进行调整：

.headline {
font-optical-sizing: auto;
}

这允许字体在不同大小下优化其外观。这就好比拥有一个变形字体！

CSS 字体 - 字体调色板

字体调色板让你使用预定义的颜色方案：

@font-palette-values --custom-palette {
font-family: Pixelify Sans;
base-palette: 1;
}

.colored-text {
font-palette: --custom-palette;
}

这应用了一个自定义的颜色调色板到你的字体上。这就好比给你的文本做了一个改造！

CSS 字体 - 字体大小

字体大小非常直接：

body {
font-size: 16px;
}
h1 {
font-size: 2em;
}

在这里，我们为正文设置了一个基础大小，并将标题设置为两倍大。这就好比给你的文本施了一个生长魔法！

CSS 字体 - 字体大小调整

字体大小调整有助于在不同字体之间保持可读性：

.adjusted-text {
font-size-adjust: 0.5;
}

这根据x-height调整字体大小。这就好比给文本穿上了增高鞋！

CSS 字体 - 字体拉伸

字体拉伸允许你压缩或扩展你的字体：

.stretched-text {
font-stretch: extra-expanded;
}

这让你的文本变得更宽。这就好比你的文本去了健身房并增肌了！

CSS 字体 - 使用 font-style 属性

字体样式允许你倾斜你的文本：

.emphasized {
font-style: italic;
}

这给文本一个倾斜的样式。这就好比你的文本靠过来低语一个秘密！

CSS 字体 - 使用 font-weight 属性

字体重量控制你的文本有多粗：

.important {
font-weight: bold;
}

这让你的文本更加突出。这就好比你的文本在炫耀肌肉！

CSS 字体 - 使用 font-synthesis 属性

字体合成控制浏览器如何创建字体的粗体或斜体版本：

.no-fake-bold {
font-synthesis: none;
}

这阻止浏览器创建合成的粗体版本。这就好比告诉你的浏览器，“不要假装直到你做到！”

CSS 字体 - 使用 font-variant 属性

字体变体允许你使用替代符号：

.smallcaps {
font-variant: small-caps;
}

这将小写字母转换为小型大写字母。这就好比你的文本穿上了小号燕尾服！

CSS 字体 - 使用 font-variation-settings 属性

字体变化设置为你提供了对可变字体的精细控制：

.custom-font {
font-variation-settings: "wght" 375, "wdth" 80;
}

这设置了自定义的重量和宽度值。这就好比给你的文本定制了一套西装！

CSS 行高

行高控制文本行之间的空间：

p {
line-height: 1.5;
}

这将行高设置为字体大小的1.5倍。这就好比给你的文本留出了伸展腿部的空间！

CSS 字体 - Google Fonts

Google Fonts 是一个免费的、网络友好的字体宝库：

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

body {
font-family: 'Roboto', sans-serif;
}

这导入并使用了Roboto字体。这就好比有一个个人字体造型师！

CSS 字体 - 备用字体

总是提供备用字体：

body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

这确保你的文本总是看起来很好，即使你首选的字体不可用。这就好比给你的备份计划再准备一个备份计划！

CSS 字体 - 总结

以下是我们所涵盖的所有字体属性的快速总结：

属性	描述	示例
font	多个字体属性的简写	font: italic bold 16px/2 Arial, sans-serif;
font-family	指定字体家族	font-family: Arial, sans-serif;
font-feature-settings	控制高级排版特性	font-feature-settings: "smcp" on;
font-kerning	控制字体字距	font-kerning: normal;
font-language-override	覆盖语言特定的符号替换	font-language-override: "JAN";
font-optical-sizing	控制光学大小调整	font-optical-sizing: auto;
font-palette	指定字体调色板	font-palette: --custom-palette;
font-size	设置字体大小	font-size: 16px;
font-size-adjust	根据x-height调整字体大小	font-size-adjust: 0.5;
font-stretch	控制字体拉伸	font-stretch: extra-expanded;
font-style	设置字体样式（正常、斜体、倾斜）	font-style: italic;
font-weight	设置字体重量	font-weight: bold;
font-synthesis	控制字体面的合成	font-synthesis: none;
font-variant	指定字体变体	font-variant: small-caps;
font-variation-settings	控制可变字体的特性	font-variation-settings: "wght" 375;
line-height	设置行高	line-height: 1.5;

就这样，伙计们！关于CSS字体的全面指南。记住，排版是一种艺术形式，现在你已经有了成为真正艺术家的工具。快乐编码，愿你的字体总是那么棒！

Credits: Image by storyset