Question

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

Answer 1

在Typekit的博客上找到this interesting post。这是我一直在寻找的那种答案。

编辑：我写了一篇web font server，其中借用了文章中描述的一些技巧。

Answer 2

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

嵌入您想要的任何字体的唯一真正障碍是许可限制，这就是创建Typekit来解决的问题。它们提供了一种合法嵌入Web字体的方法，它们已经从类型代工厂获得了许可权 - 因此订阅成本。

如果您能找到没有此类许可限制的免费字体，或者您可以获取专门用于Web使用的WOFF字体，并且还可以压缩以加快加载速度，您可以像Aillyn一样建议。或者，您可以将TrueType / OpenType字体转换为WOFF并使用您想要的任何字体，无论合法性如何。

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

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

-where ...是在Base64中编码的WOFF文件。您也可以在获得WOFF字体后自己完成此操作。

在WOFF中没有天生的DRM，所以我不确定是什么促使字体代工厂突然通过WOFF接受网络字体，但从我从一些字体设计师那里读到的，似乎可能有一些基础误解了网页的工作原理以及“同源”政策的实际含义。

Answer 3

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

@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。

Typekit如何在幕后工作？

3 个答案: