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

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 套件，您可以看到字体的实际来源已发送给用户 - 无需混淆。此外，字体所有者可能会要求某种形式的归属，例如

If the font is a free font ($0.00 license fee), you may use this font for Font-Face embedding, but only if you put a link to www.exljbris.nl on your page and/or put this notice

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

in your CSS file as near as possible to the piece of code that declares the Font-Face embedding of this font.

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