CSS - 网页字体：初学者指南

你好，未来的网页设计师们！我很高兴能成为你们在这个激动人心的CSS网页字体世界中的向导。作为一名多年来一直教授计算机科学的教师，我可以告诉你们，理解字体就像学习一门新语言 - 起初可能会觉得有些困难，但一旦掌握了要领，你会惊讶于它如何改变你的网页！

CSS - Web safe fonts

网页字体是什么？

在我们深入了解之前，让我们从基础开始。网页字体是你可以用在网站上的自定义字体，无论用户的计算机上是否安装了它们。这就好像给你的网站赋予了它自己独特的声音！

为什么网页字体很重要？

想象一下，如果世界上每一本书都使用相同的字体。是不是很无聊？网页字体允许你表达网站的性格，并提高可读性。它们是让你的网站在众多网站中脱颖而出的秘诀！

CSS 网页字体 - 字体格式类型

现在，让我们来谈谈不同类型的字体格式。这就像在冰淇淋的不同口味之间选择 - 每一种都有其独特的特点！

格式	描述	浏览器支持
TTF/OTF	TrueType 字体 / OpenType 字体	所有现代浏览器
WOFF	网页开放字体格式	所有现代浏览器
WOFF2	网页开放字体格式 2	绝大多数现代浏览器
EOT	嵌入式开放字体	Internet Explorer
SVG	可缩放矢量图形	较老的 iOS 版本

如果这些现在看起来像是字母汤，别担心。我们会一点一点解释清楚！

CSS 网页字体 - 关键点

在我们动手写代码之前，让我们先了解一些关键点：

网页字体允许你在网站上使用自定义字体。
它们是从服务器加载的，而不是用户的计算机。
你可以使用像Google Fonts这样的服务，或者自己托管字体。
存在不同的字体格式以确保浏览器兼容性。
使用 @font-face 规则来在CSS中定义自定义字体。

CSS 网页字体 - @font-face 伪规则

现在，让我们来写一些代码！@font-face 规则就像向你的网页引入一种新字体。下面是如何操作的：

@font-face {
font-family: 'MyAwesomeFont';
src: url('path/to/my-awesome-font.woff2') format('woff2'),
url('path/to/my-awesome-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}

让我们分解一下：

font-family：这是你给字体的名字。稍后你会用这个名字来应用到元素上。
src：这指定了字体文件的位置和格式。
font-weight 和 font-style：这些定义了字体的特征。

定义好字体后，你可以这样使用：

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

这告诉浏览器，“嘿，使用MyAwesomeFont，但如果找不到，就退回到任何无衬线字体。”

CSS 网页字体 - @font-face / font-stretch

font-stretch 属性就像字体的瑜伽课。它允许你拉伸或压缩字体。下面是如何使用它的：

@font-face {
font-family: 'StretchyFont';
src: url('path/to/stretchy-font.woff2') format('woff2');
font-stretch: ultra-expanded;
}

.stretched-text {
font-family: 'StretchyFont';
font-stretch: 150%;
}

这会让你的文本看起来像刚去健身并增加了一些肌肉！

CSS 网页字体 - 在线字体服务

使用在线字体服务就像点外卖而不是自己做饭 - 既方便又有多种选择。Google Fonts 是一个流行的选择。下面是如何使用的：

访问 Google Fonts 并选择你喜欢的字体。
复制提供的链接标签并将其粘贴到你的 HTML <head> 中：

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

在CSS中使用这个字体：

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

就这样！你现在正在使用 Google Fonts 的自定义字体。

CSS 网页字体 - 导入字体

另一种包含网页字体的方法是使用 @import 规则。这就像邀请字体参加你的 CSS 宴会。下面是如何操作的：

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

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

这种方法允许你将所有的字体声明保留在 CSS 文件中，一些开发者更倾向于这种组织方式。

结论

恭喜你！你已经迈出了进入CSS网页字体奇妙世界的第一步。记住，就像学习任何新技能一样，熟能生巧。不要害怕尝试不同的字体，看看它们如何改变你的网页的外观和感觉。

在我们结束之前，这里有一个我的教学经验中的小故事：我曾经有一个在网页设计方面遇到困难的学生。她不明白为什么她的网站看起来那么平淡无奇。然后我们学习了网页字体，就像灯泡亮了一样。突然之间，她的网站从无聊变得美丽。这就是网页字体的力量！

所以，继续前进，玩转字体，看着你的网页焕发生机。快乐编码，并记住 - 在网页设计的世界里，唯一的限制是你的想象力！

Credits: Image by storyset