Fonts @font-face是如何工作的？

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

我想知道的是，浏览器是否对字体进行编码或使用它而不公开字体

---

谢谢

在大多数情况下，字体文件是公开的，因为它直接与CSS文件链接，因此任何足够聪明的人都可以下载字体并将其安装到他们的机器上。这就是为什么大多数商业字体许可证禁止在带有

@font-face

的网站上使用它们的部分原因。但有一些技术限制了这一点。例如，查看Font Squirrel的@Font face生成器上的“仅Web”选项。

@Font face

告诉浏览器在哪里下载实际字体

例如，在使用时，它们会给您提供如下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');
}

如果打开url（），浏览器将下载实际的true type字体文件

---

我用这种方法下载了谷歌的字体（所以我的Photoshop模型有正确的字体）

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

因此，无论是在法律层面（通过选择允许嵌入的字体）还是通过服务器端模糊处理方案，都可以确保字体的安全。例如，查看通过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） 许可费），您可以使用此字体 用于字体嵌入，但仅当 您在上放置了指向www.exljbris.nl的链接 您的页面和/或放置此通知

/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */ 

尽可能靠近CSS文件 到声明 此字体的字体面嵌入

---

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

“公开”是什么意思？@Ian Devlin“公开”是指允许其他程序使用。base64编码不是混淆，它是一种在维护“text/css”MIME类型的同时消除对字体文件发出额外HTTP请求的方法。@Stan真的，我想不出任何其他原因。Typekit最多只允许使用五种字体，因此HTTP请求开销并没有那么大。你有任何文档来支持吗？`每个HTTP请求都很重要，base64是一种内容传输编码，每个人都有一个解码器。目的不是混淆——另一种选择是二进制传输，它不能嵌入到样式表中。如果愿意，您可以选择强制请求字体文件；Typekit已选择不这样做。（我对小的重复背景图像使用相同的技术。）他们给了你一个比二进制文件更容易被用户访问的文件（不需要搜索缓存，只需从CSS文件复制，保存和转换）。