Fontsquirrel如何用？新手必看教程！-建站教程-锦华智联科技

FontSquirrel 使用教程：从下载到网页应用

FontSquirrel 是一个非常优秀的免费字体资源网站，它不仅提供高质量的商用免费字体，还提供了一个极其强大的 @font-face 生成器,让开发者能够轻松地将字体应用到网站中。

（图片来源网络，侵删）

本教程将分为以下几个部分：

第一部分：寻找和下载字体
第二部分：使用 @font-face 生成器（核心功能）
第三部分：下载和使用字体文件
第四部分：在网页中应用字体
高级技巧与注意事项

第一部分：寻找和下载字体

这是最简单的部分,就像逛商店一样。

访问网站：打开你的浏览器，进入 FontSquirrel 官网。
浏览字体：
（图片来源网络，侵删）
- 首页推荐：首页会展示最新、最受欢迎的字体。
- 分类浏览：点击顶部的导航栏，你可以按 字体分类（如 Sans Serif, Serif, Script, Display 等）、风格（如手写、复古、现代）、语言等进行筛选。
- 使用标签：每个字体都有多个标签，如 "free for commercial use" (可商用)、"Google Font" (来自谷歌字体)、"pixel" (像素风) 等,方便你快速找到符合需求的字体。
查看字体详情：
- 点击任何一个字体,进入详情页。
- 在这里你可以预览字体在不同大小和场景下的效果，查看字体的详细信息（如设计师、发布日期、许可证等）。
- 最关键的一步：检查 "License" (许可证)，FontSquirrel 上的字体基本都是免费商用的，但具体条款可能略有不同,务必查看确认。
下载字体：
- 在详情页，你会看到 "Download" 按钮。
- 点击后，通常会下载一个 .zip 压缩包，里面包含了该字体的不同字重（如 Regular, Bold, Italic）和不同格式（如 TTF, OTF, WOFF 等）的文件。

第二部分：使用 @font-face 生成器（核心功能）

这是 FontSquirrel 最强大的功能，专为网页开发者设计，它能帮你生成一套完整的、跨浏览器兼容的网页字体方案。

为什么需要它？ 因为不同浏览器支持不同的字体格式：

WOFF2 (.woff2)：现代浏览器的首选，压缩率高,加载速度快。
WOFF (.woff)：广泛支持的旧版格式。
TTF (.ttf)：TrueType，几乎所有系统都支持,但文件较大。
EOT (.eot)：旧版 IE 浏览器专用格式。
SVG (.svg)：主要用于旧版 iOS 设备。

手动转换这些格式非常麻烦，而 @font-face 生成器一键搞定。

使用步骤：

访问生成器：进入 FontSquirrel @font-face Generator 页面。
上传字体文件：
- 将你从 FontSquirrel 下载的 .zip 压缩包直接拖拽到上传区域，或者点击 "Browse" 选择解压后的 TTF 或 OTF 文件。
- 提示：如果你只需要部分字重（比如只 Regular 和 Bold），可以先解压，只上传你需要的文件,这样可以减小最终文件体积。
设置选项（非常重要）：
- "Base64 Encode" (Base64 编码)：
  - 勾选：字体文件会以 Base64 字符串的形式嵌入到 CSS 文件中，优点是减少一个 HTTP 请求，缺点是 CSS 文件会变得非常大。
  - 不勾选：字体文件会作为独立的文件下载，优点是浏览器可以缓存字体文件,优点是文件大小更可控。
  - 建议：对于大多数网站，不勾选 是更好的选择，因为它利用了浏览器缓存,能提高二次访问速度。
- "Auto-Hint" (自动提示)：保持默认勾选，它能优化字体在屏幕上的显示效果，尤其是在 Windows 系统上。
- "Fix Vertical Metrics" (修复垂直度量)：保持默认勾选，这可以解决不同字体在行高上不一致的问题,让排版更稳定。
- "Subsetting" (子集化)：
  - 这是优化字体加载的关键！ 默认是 "Auto-subset"，它会自动生成一个只包含常用字符的字体文件,大大减小文件体积。
  - 你也可以选择 "Latin"（仅拉丁字符）或手动输入你的网站会用到的字符，如果你的网站是中文站，这个功能就不太适用，因为需要包含完整的汉字集,文件会非常大。
  - 注意：子集化后，字体文件将不再包含所有字符,请确保你的网站内容都在包含的字符范围内。
生成并下载：
- 点击 "Download Kit" 按钮。
- 下载完成后，你会得到一个新的 .zip 压缩包，这就是你的 "Webfont Kit"。

第三部分：下载和使用字体文件

如果你不是开发者，或者想在 Photoshop、Word 等本地软件中使用字体,你不需要使用生成器。

回到字体详情页：在 FontSquirrel 字体详情页，找到 "Download" 按钮。
选择格式：
- 点击 "Download" 后,通常会弹出一个窗口让你选择下载哪些格式。
- 对于 本地安装，选择 TTF (TrueType Font) 或 OTF (OpenType Font) 格式即可,它们是操作系统最通用的格式。
安装字体：
- 下载并解压后，你会得到一个 .ttf 或 .otf 文件。
- Windows：右键点击字体文件，选择 "安装"。
- macOS：双击字体文件，在预览窗口中点击 "安装字体" 按钮。
- 安装完成后，你就可以在 Word、Photoshop、Figma 等任何支持字体的软件中使用它了。

第四部分：在网页中应用字体

这部分是给开发者的，使用第二部分生成的 "Webfont Kit"。

解压 Webfont Kit：将你从生成器下载的 .zip 包解压到一个文件夹中,你会看到类似下面的文件：
- stylesheet.css：核心 CSS 文件，定义了 @font-face 规则。
- fonts/ 文件夹：包含了所有转换后的字体文件（.woff2, .woff 等）。
- demo.html：一个预览文件,你可以参考它如何使用字体。
将文件放入你的项目：将 fonts 文件夹和 stylesheet.css 文件复制到你的网站项目目录中。

引入 CSS 文件：在你的 HTML 文件的 <head> 标签内，通过 <link> 标签引入 stylesheet.css。

<head>
    <meta charset="UTF-8">
    <title>我的网站</title>
    <!-- 引入 FontSquirrel 生成的 CSS 文件 -->
    <link rel="stylesheet" href="path/to/stylesheet.css">
</head>

在 CSS 中使用字体：

打开 stylesheet.css 文件,你会看到类似这样的代码：

@font-face {
    font-family: 'MyWebFont';
    src: url('fonts/webfont.eot'); /* IE9 Compat Modes */
    src: url('fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('fonts/webfont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/webfont.svg#webfont') format('svg'); /* Legacy iOS */
}

这段代码告诉浏览器去哪里寻找字体文件,并为不同浏览器提供最合适的格式。
你就可以像使用普通字体一样使用它了：
```
body {
    font-family: 'MyWebFont', Arial, sans-serif; /* 'MyWebFont' 是你在 @font-face 中定义的 font-family 名称 */
}
h1 {
    font-family: 'MyWebFont';
    font-weight: 700; /* 假设你的 Bold 字重在生成时被命名为 'MyWebFontBold' */
}
```
注意：如果你的字体有不同的字重（如 Regular, Bold, Italic），生成器会为每个字重生成一个 @font-face 规则，你需要在 CSS 中使用正确的 font-family 名称（如 'MyWebFontBold'）和 font-weight 属性。

第五部分：高级技巧与注意事项

性能优化：
- 只加载需要的字重和样式：不要把所有字重都打包进去，只保留你设计稿中会用到的（如 Regular, Bold, Italic）。
- 使用 font-display：在你的 @font-face 规则中添加 font-display 属性，可以控制字体加载期间的显示行为，优化用户体验。
```
@font-face {
    font-family: 'MyWebFont';
    src: url('...') format('woff2');
    font-display: swap; /* 最常用的值，先显示系统字体，字体加载完后再替换，避免无内容 */
}
```
- 考虑字体托管服务：对于大型项目，可以考虑使用 Google Fonts、Adobe Fonts 等专业字体托管服务，它们在全球有 CDN,能提供更快的加载速度和更方便的管理方式。
许可证问题：
- 再次强调，务必阅读字体的许可证，虽然 FontSquirrel 上的字体大多免费商用，但有些可能有特殊要求（如要求署名、禁止修改等）。
- FontSquirrel 会对字体进行审核，并标记为 "100% Free for Commercial Use",但最终确认还是以原设计师的许可证为准。
备用字体：
- 在 font-family 属性中，始终提供一系列备用字体,以防用户的设备上没有你指定的网络字体。
- font-family: 'MyWebFont', 'Helvetica Neue', Arial, sans-serif;。MyWebFont 加载失败,浏览器会依次尝试后面的字体。

希望这份详细的教程能帮助你完全掌握 FontSquirrel 的使用！祝你玩得开心！