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

Typekit 在幕后如何工作？

发布于 2024-09-13 13:36:04 字数 73 浏览 3 评论 0原文

我很好奇是否有人知道这些东西在幕后是如何工作的。我很感兴趣是否有一种方法可以托管您自己的字体，以及这些字体是否适用于所有主要浏览器？

原文

分享到QQ

分享到微博

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

发布评论

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

为人所爱 2024-09-20 13:36:04

发现这篇有趣的帖子在 Typekit 的博客上。这就是我正在寻找的答案。

编辑：我编写了一个网络字体服务器，它借用了所描述的一些技术在文章中。

回复收藏 0 原文

‖放下 2024-09-20 13:36:04

我建议查找 WOFF（网络开放字体格式）。应该有各种应用程序（至少一个免费的网络应用程序）可用于将常规桌面字体转换为 WOFF。

嵌入您想要的任何字体的唯一真正障碍是许可限制，而这正是 Typekit 的创建目的。他们提供了一种合法嵌入网络字体的方法，这些字体是他们从字体铸造厂获得许可权的，因此需要付费。

如果您可以找到没有此类许可限制的免费字体，则可以按照 Aillyn 的建议进行操作，或者您可以获取专门为 Web 使用授权的 WOFF 字体，并且这些字体也经过压缩以加快加载速度。或者，您可以将 TrueType/OpenType 字体转换为 WOFF 并使用您想要的任何字体，无论其合法性如何。

然而，Typekit 嵌入字体的方式是将它们直接嵌入到 CSS 中：

@font-face {
    font-family: "bello-pro-1";
    src: url(data:font/woff;base64,...=);
    font-style: normal;
    font-weight: 400;
}

— 其中 ... 是以 Base64 编码的 WOFF 文件。获得 WOFF 字体后，您也可以自己执行此操作。

WOFF 中没有固有的 DRM，所以我不确定是什么促使字体铸造厂突然通过 WOFF 拥抱网络字体，但从我从一些字体设计师那里读到的内容来看，似乎可能存在一些根本性的误解网页的工作原理以及“同源”策略的实际含义。

I suggest looking up WOFF (Web Open Font Format). There should be various applications (at least one free web app) available for converting regular desktop fonts to WOFF.

The only real obstacle to embedding any font you want are licensing restrictions, and that is what Typekit was created to solve. They provide a means to legally embed web fonts that they've obtained licensing rights for from type foundries—hence the subscription cost.

You can do as Aillyn suggest if you can find free fonts that don't have such licensing restrictions, or you can acquire WOFF fonts that are licensed specifically for web use, and which are also compressed for faster loading. Alternately, you can convert your TrueType/OpenType fonts into WOFF and use any font you want, regardless of legality.

However, the way Typekit embeds fonts is by embedding them directly in the CSS:

@font-face {
    font-family: "bello-pro-1";
    src: url(data:font/woff;base64,...=);
    font-style: normal;
    font-weight: 400;
}

—where ... is the WOFF file encoded in Base64. You can also do this yourself once you've acquired a WOFF font.

There's no innate DRM in WOFF, so I'm not sure what has prompted font foundries to suddenly embrace web fonts through WOFF, but from what I've read from a few font designers, it appears that there might be some fundamental misunderstanding of how web pages work and what the "same-origin" policy actually implies.

回复收藏 0 原文

终止放荡 2024-09-20 13:36:04

我想他们只是嵌入这样的字体：

@font-face {  
  font-family: " your FontName ";  
  src: url( /location/of/font/FontFileName.eot ); /* IE */  
  src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */  
}  

/* THEN use like you would any other font */  
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif;  
}

http://randsco.com/ index.php/2009/07/04/p680

我对此进行了测试，它适用于 Windows 上的 IE8、FF、Chrome 和 Safari。

I imagine they are just embedding fonts like this:

@font-face {  
  font-family: " your FontName ";  
  src: url( /location/of/font/FontFileName.eot ); /* IE */  
  src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */  
}  

/* THEN use like you would any other font */  
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif;  
}

http://randsco.com/index.php/2009/07/04/p680

I tested that and it works for IE8, FF, Chrome and Safari on Windows.

回复收藏 0 原文

~没有更多了~