如何在 HTML 中嵌入字体?
-
03-07-2019 - |
解决方案
事情发生了变化,因为这个问题最初被问及并得到了解答。使用@ font-face嵌入使用正文文本的跨浏览器字体嵌入工作已经完成了大量的工作。
Paul Irish将 Bulletproof @ font-face syntax 结合在一起来自其他多个人的尝试。如果您真正浏览整篇文章(不仅仅是顶部),它允许单个@ font-face语句覆盖IE,Firefox,Safari,Opera,Chrome以及其他可能的内容。基本上这可以用不会破坏任何东西的方式输出OTF,EOT,SVG和WOFF。
从他的文章中摘过:
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
在此基础上, Font Squirrel 汇集了各种有用的工具,包括 @ font-face Generator ,它允许您上传TTF或OTF文件并获得自动转换了其他类型的字体文件,以及预先构建的CSS和演示HTML页面。 Font Squirrel还有数以百计的@ font-face工具包。
Soma Design还整合了 FontFriend Bookmarklet ,它可以动态重新定义页面上的字体,你可以尝试一下。它包括FireFox 3.6 +中的拖放@ font-face支持。
最近,Google开始提供 Google网络字体,这是一种可用的字体。开源许可证,由Google服务器提供。
许可限制
最后,WebFonts.info汇总了一个很好的维基列表基于许可证可用于@ font-face嵌入的字体。它并不是一个详尽的列表,但它上面的字体应该是可用的(可能有条件,如CSS文件中的属性)嵌入/链接。 阅读许可证非常重要,因为在字体下载方面有一些明显的限制。
其他提示
尝试 Facetype.js ,转换你的。将TTF字体转换为Javascript文件。完全兼容SEO,支持FF,IE6和Safari,并在其他浏览器上优雅地降级。
不,除非你愿意只为那些拥有最前沿浏览器的人提供服务,否则没有合适的身体类型解决方案。
Microsoft已经 WEFT ,他们自己的专有字体嵌入技术,但我还没有多年来听到它谈论过,我知道没有人使用它。
我使用sIFR获取显示类型(标题,博客帖子的标题等),并使用一种较少破旧的网络安全字体作为体型(如Trebuchet MS)。如果您对所有网络安全字体感到厌倦,那么您可能过于狭隘地定义了这个术语— 看看这个库存字体矩阵附带主要操作系统和机会,你将能够找到一个字体级联这将几乎吸引所有网络用户。
例如: font-family:" Lucida Grande"," Verdana" sans-serif
是一种常见的字体级联; OS X附带Lucida Grande,但那些使用Windows的用户将获得Verdana,这是一种网络安全字体,字体大小和形状与Lucida Grande相似。 Linux用户如果安装了大多数发行版包管理器中存在的Web安全字体包,也会获得Verdana,否则它们将回归到普通的sans-serif。
并且它不太可能 - EOT是一种相当严格的格式,只有IE才支持。 Safari 3.1和Firefox 3.1(以及当前的alpha)和可能的Opera 9.6都支持真实字体(ttf)嵌入,并且至少Safari通过相同的机制支持SVG字体。一个单独的列表有一个很好的讨论有一段时间返回。
查看 类型套件, ,一个商业选项(他们也有免费的软件包)。
它根据所使用的浏览器使用不同的技术(@font-face
与 EOT
格式),并且他们还为您处理所有字体许可问题。它支持低至 IE6 的所有内容。
以下是有关 Typekit 工作原理的更多信息:
我问了这个一会儿。答案基本上是它不起作用。 :(