当前位置：文江博客话题详情

@font-face 如何工作？

发布于 2024-09-28 04:24:18 字数 104 浏览 1 评论 0原文

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

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

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

回梦 2024-10-05 04:24:18

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

因此，保持字体安全的问题可以在法律层面（通过选择允许嵌入的字体）或通过服务器端混淆方案来解决。例如，查看通过 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 的链接放在
您的页面和/或放置此通知
/* Jos Buivenga 的字体 (exljbris) -> www.exljbris.com */ 
在你的 CSS 文件中尽可能靠近
到声明的代码段
此字体的 Font-Face 嵌入。

参见此许可证。因此，综上所述，我们可以有把握地得出这样的结论：字体安全问题并不是发生在客户端，而是落在了开发者的肩上，因此浏览器不能也不会做任何事情来阻止用户访问到这些字体。

The browser cannot protect the source of the fonts. Once the information gets received by the browser, you can safely assume that the user will have full access to whatever you send it.

Thus the problem of keeping the fonts secure is done on either on the legal level (by choosing fonts which allows for embedding) or through server side obfuscation schemes. For instance, look at the fonts embedded through TypeKit:

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

The font is obfuscated through a base64 encoding process. Additionally, the font is split in two and the number of glyphs are limited to only the ones needed by the website.

On the other hand, looking at FontSquirrel and Google Font API @font-face kits, you can see that the actual source of the font is sent to the user - no obfuscation required. Additionally, font owners may demand some form of attribution, such as

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.

seen in this license. Therefore, from all of these, we can safely conclude that the problem of font security does not happen on the client side, but rather falls on the shoulder of the developer, and so browsers cannot and do not do anything to stop users from gaining access to these fonts.

回复收藏 0 原文

毁梦 2024-10-05 04:24:18

@font-face 告诉您的浏览器在哪里下载实际字体。

例如，当使用 Google 的网络字体时，它们会为您提供如下 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');
}

如果您打开网址 (< a href="http://themes.googleusercontent.com/font?kit=p5ydP_uWQ5lsFzcP_XVMEw" rel="nofollow">http://themes.googleusercontent.com/font?kit=p5ydP_uWQ5lsFzcP_XVMEw）您的浏览器将下载实际的 True Type 字体文件。

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

@font-face tells your browser where to download the actual font.

For example, when using Google's web fonts, they give you CSS like this:

@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');
}

If you open the url (http://themes.googleusercontent.com/font?kit=p5ydP_uWQ5lsFzcP_XVMEw) your browser will download the actual true type font file.

I've downloaded google's fonts using this method (so my Photoshop mock ups have the correct font).

回复收藏 0 原文

自在安然 2024-10-05 04:24:18

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

回复收藏 0 原文

~没有更多了~