Question

我知道使用@ font-face允许浏览器下载自定义字体并在网页中使用它，就像任何系统字体一样。

我想知道的是浏览器是否对字体进行编码或使用它而不暴露它？

由于

Answer 1

浏览器无法保护字体的来源。一旦浏览器收到信息，您就可以安全地假设用户可以完全访问您发送的任何信息。

因此，保持字体安全的问题是在法律层面（通过选择允许嵌入的字体）或通过服务器端混淆方案完成的。例如，查看通过TypeKit嵌入的字体：

@font-face {
    font-family:"rosewood-std-fill-1";
    src:url(data:font/opentype;base64,d09GRgABAAAAAEa4ABMAAAAA2XwA.....);
    font-style:normal;
    font-weight:400;
}

通过base64编码过程对字体进行模糊处理。此外，字体分为两部分，字形数量仅限于网站所需的字体数量。

另一方面，查看FontSquirrel和Google Font API @font-face工具包，您可以看到字体的实际来源发送给用户 - 无需进行模糊处理。此外，字体所有者可能会要求某种形式的归属，例如

如果字体是免费字体（$ 0.00 许可证费用），您可以使用此字体对于Font-Face嵌入，但仅限于你把链接到www.exljbris.nl上了您的页面和/或发出此通知
/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */ 
尽可能在你的CSS文件中
到声明的代码片段 Font-Face嵌入此字体。

见this license。因此，从所有这些，我们可以有把握地得出结论，字体安全问题不会发生在客户端，而是落在开发人员的肩上，因此浏览器不能也不会做任何事情来阻止用户获取访问权限这些字体。

Answer 2

@font-face告诉您的浏览器下载实际字体的位置。

例如，当使用Google's web fonts时，他们会给你这样的CSS：

@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: normal;
  src: local('Cantarell'), url('http://themes.googleusercontent.com/font?kit=p5ydP_uWQ5lsFzcP_XVMEw') format('truetype');
}

如果您打开网址（http://themes.googleusercontent.com/font?kit=p5ydP_uWQ5lsFzcP_XVMEw），您的浏览器将下载实际的真实字体文件。

我使用此方法下载了谷歌的字体（因此我的Photoshop模型具有正确的字体）。

Answer 3

在大多数情况下，字体文件是公开的，因为它直接链接到您的CSS文件，因此任何足够智能的人都可以下载字体并将其安装在他们的计算机上。这就是大多数商业字体许可证禁止在@font-face网站上使用的部分原因。但有些技术限制了这一点。例如，查看Font Squirrel的@ font-face generator上的“仅限Web”选项。

@ font-face如何工作？

3 个答案: