3.1 网页字体
在网页上连接字体在创建独特且吸引人的设计中起着关键作用。网页字体允许使用用户电脑上未安装的字体，通过从服务器加载这些字体来实现。Google Fonts 是使用网页字体最受欢迎的服务之一。我们将更详细地审视如何在网页上连接网页字体和 Google Fonts。
网页字体 是从远程服务器加载并显示在网页上的字体，即使它们没有安装在用户的设备上。这为选择字体提供了更大的灵活性，并且可以创造出更吸引人的设计。
连接网页字体
使用 @font-face 连接网页字体的示例：
首先，你需要将字体文件上传到你的服务器。通常这些文件格式包括 .woff, .woff2, .ttf, .eot, 和 .svg。
步骤 2. 在 CSS 中使用 @font-face：
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
使用 @font-face 的好处：
- 控制: 完全控制字体的选择和使用
- 兼容性: 支持多种字体格式以确保与不同浏览器的兼容性
- WOFF (Web Open Font Format): 被广泛支持的网页字体格式
- WOFF2: WOFF 的增强版，压缩效果更好
- TTF (TrueType Font): 大多数浏览器支持的标准字体格式
- EOT (Embedded OpenType): Internet Explorer 支持的格式
- SVG: 用于 SVG 图形字体的格式
3.2 Google Fonts
Google Fonts 提供了一系列免费字体，您可以轻松将其集成到您的网站中。使用 Google Fonts 的优点是连接简单且可用字体种类繁多。
通过 Google Fonts 连接字体：
1. 在 Google Fonts 网站上选择字体：
访问 Google Fonts 并选择您想要使用的字体。
2. 获取连接链接：
在所选字体的页面上选择需要的字重和样式。之后，Google Fonts 将生成一个用于连接字体的链接。
3. 将链接插入 HTML 文档中：
复制生成的链接并将其插入到您的 HTML 文档的 <head> 部分。
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
1. 在 CSS 中应用字体：
使用 font-family 属性将字体应用到页面上的元素。
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
通过 HTML 使用 Google Fonts 的示例：
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>这段文字使用了 Roboto 字体。</p>
</body>
</html>
3.3 使用 CSS @import
也可以通过 CSS 中的 @import 规则来连接 Google 的字体。
通过 @import 使用 Google Fonts 的示例：
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
使用 Google Fonts 的好处：
- 简单易用: 只需一行代码即可轻松集成字体
- 丰富选择: 可访问大量不同风格和类别的字体
- 性能优化: 字体从 Google 的高性能服务器加载
Google Fonts 的网页字体连接代码中的 display="swap" 属性增强了性能和用户体验。当你连接网页字体时，浏览器需要先下载并显示字体才能显示文本。这可能会导致延迟，特别是在网络较慢的情况下。display="swap" 解决了这个问题，告诉浏览器在下载网页字体时使用系统默认字体。一旦网页字体加载完成，浏览器将用它替换系统字体。
对性能的影响：
使用网页字体时，重要的是要考虑它们对网页性能的影响。加载大量字体或字重可能会增加页面加载时间。为了最大限度地减少这种影响，请遵循以下建议：
- 使用最少必要的字重: 只选择你真正需要的字重
- 使用
display="swap": 这确保在网页字体加载时显示系统字体，从而提升用户的性能感知 - 优化字体交付: 使用缓存和预加载（preload）来提升性能
GO TO FULL VERSION