如何托管您自己的网络字体

通过自托管开放许可字体来定制您的网站。

图片来源

Jason Baker 为 Opensource.com 制作。CC-BY-SA 4.0。

字体对于许多计算机用户来说通常是一个谜。例如，您是否设计了一个很酷的传单，当您将文件送到某处打印时，发现所有标题都以 Arial 字体呈现，因为打印机没有您在设计中使用的花哨字体？当然，有很多方法可以防止这种情况发生：您可以将特殊字体中的单词转换为路径，将字体捆绑到 PDF 中，将开源字体与您的设计文件捆绑在一起，或者至少列出所需的字体。然而，这仍然是一个问题，因为我们是人，而且我们是健忘的。

Web 也存在同样的问题。如果您对 CSS 有基本的了解，您可能见过这样的声明

h1 { font-family: "Times New Roman", Times, serif; }

这是一个设计师尝试定义特定字体，并在用户没有安装 Times New Roman 时提供后备字体，并在用户也没有 Times 字体时提供另一个后备字体的尝试。这比使用图形代替文本要好，但这仍然是一种笨拙、不优雅的字体非管理方法。然而，在 Web 的早期，我们只能使用这种方法。

网络字体

然后，网络字体出现了，将字体管理从客户端转移到服务器。网站上的字体由服务器为客户端呈现，而不是要求 Web 浏览器在用户的系统上查找字体。Google 和其他提供商甚至托管开放许可字体，设计师可以通过简单的 CSS 规则将其包含在他们的网站上。

当然，这种免费便利的问题在于，它并非没有成本。使用它是 0 美元，但像 Google 这样的大型网站喜欢跟踪谁引用了他们的数据，包括字体。如果您认为没有必要协助 Google 构建每个人在 Web 上的活动记录，那么好消息是您可以托管自己的网络字体，而且它就像将字体上传到您的主机并使用一个简单的 CSS 规则一样简单。作为附带好处，您的网站加载速度可能会更快，因为在加载每个页面时，您将减少一次外部调用。

自托管网络字体

您需要的第一件事是开放许可字体。如果您不习惯考虑或关心晦涩的软件许可证，这可能会令人困惑，尤其是因为似乎所有字体都是免费的。我们很少有人有意识地为字体付费，但大多数人的计算机上都有价格昂贵的字体。由于许可协议，您的计算机可能附带了您在法律上不允许复制和再分发的字体。像 Arial、Verdana、Calibri、Georgia、Impact、Lucida 和 Lucida Grande、Times 和 Times New Roman、Trebuchet、Geneva 以及许多其他字体都归 Microsoft、Apple 和 Adobe 所有。如果您购买的计算机预装了 Windows 或 MacOS，您已经为使用捆绑字体的权利付费，但您不拥有这些字体，并且不允许将它们上传到 Web 服务器（除非另有说明）。

幸运的是，开源热潮很久以前就席卷了字体界，并且有来自 The League of Moveable Type、Font Library、Omnibus Type 甚至 Google 和 Adobe 等集体和项目的优秀开放许可字体集合。

您可以使用大多数常见的字体文件格式，包括 TTF、OTF、WOFF、EOT 等。由于 Sorts Mill Goudy 包含 WOFF（Web Open Font Format，部分由 Mozilla 开发）版本，我将在本示例中使用它。但是，其他格式的工作方式相同。

假设您想在您的网页上使用 Sorts Mill Goudy

将 GoudyStM-webfont.woff 文件上传到您的 Web 服务器
```
scp GoudyStM-webfont.woff seth@example.com:~/www/fonts/
```
您的主机也可能通过 cPanel 或类似的 Web 控制面板提供图形上传工具。

在您网站的 CSS 文件中，添加一个 @font-face 规则，类似于这样
```
@font-face { 
  font-family: "titlefont"; 
  src: url("../fonts/GoudyStM-webfont.woff"); 
} 
```
font-family 值是您自己定义的。它是字体表示的任何内容的人性化名称。在本示例中，我使用“titlefont”，因为我认为这种字体将用于假想网站上的主要标题。您可以同样轻松地使用“officialfont”或“myfont”。

src 值是字体文件的路径。字体路径必须适合您服务器的文件结构；在本示例中，我将 fonts 目录与 css 目录放在一起。您的网站结构可能并非如此，因此请根据需要调整路径，记住单点表示此文件夹，双点表示上一层文件夹。

现在您已经定义了字体名称和位置，您可以为您想要的任何给定的 CSS 类或 ID 调用它。例如，如果您希望 <h1> 以 Sorts Mill Goudy 字体呈现，那么请使其 CSS 规则使用您的自定义字体名称
```
h1 { font-family: "titlefont", serif; }
```

您现在正在托管和使用您自己的字体。