如何在HTML中embedded字体?

我试图找出一个体面的解决scheme(特别是从SEO方面)在网页中embedded字体。 到目前为止,我已经看到了W3C的解决scheme ,甚至没有在Firefox上工作, 这个非常酷的解决scheme 。 第二种解决scheme仅适用于标题。 有没有可用于全文的解决scheme? 我厌倦了网页的标准字体。

谢谢!

自从这个问题最初被问到和回答以来事情已经改变了 。 使用@ font-faceembeddedfunction,使得正文文本的跨浏览器字体embeddedfunction得到了大量的工作。

Paul Irish将Bulletproof @ font-face语法组合在一起,结合了其他人的尝试。 如果你真的经历了整篇文章(不只是顶部),它允许一个@ 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文件,并获得其他types的自动转换字体文件,以及预build的CSS和一个演示HTML页面。 字体松鼠也有数百个@ font-face套件 。

Soma Design还将FontFriend Bookmarklet放在一起,它可以在页面上重新定义字体,以便尝试一下。 它包含FireFox 3.6 +中的拖放@ font-face支持。

最近,Google已经开始提供Google Web字体 ,这是一种开源许可下提供的各种字体 ,由Google的服务器提供。

许可限制

最后,WebFonts.info已经基于许可证为@ font-faceembedded提供了一个很好的维基字体列表。 它并没有声称是一个详尽的列表,但它的字体应该可用(可能与条件,如CSS文件中的属性)embedded/链接。 阅读许可证非常重要 ,因为在字体下载方面存在一些不明显的限制。

试试Facetype.js ,将你的.TTF字体转换成一个Javascript文件。 完全的SEO兼容,支持FF,IE6和Safari,并在其他浏览器上优雅地降级。

不,对于体型来说,没有一个像样的解决scheme,除非你只愿意迎合那些拥有stream行浏览器的人。

微软拥有自己的专有字体embedded技术WEFT ,但是我多年没有听说过这个技术,我知道没有人使用它。

我用sIFR获取显示types(标题,博客文章的标题等),并使用一种较为破旧的网页安全字体(如Trebuchet MS)。 如果你对所有networking安全字体感到厌倦,你可能会将这个术语定义得太狭隘 – 看看这个带有主stream操作系统的库存字体matrix,你将能够find一个字体级联抓住几乎所有的networking用户。

例如: font-family: "Lucida Grande", "Verdana", sans-serif是一种常见的字体级联; OS X带有Lucida Grande,但是那些带有Windows的将会得到Verdana,一种networking安全的字体,带有与Lucida Grande大小和形状相似的字母。 如果Linux用户安装了大多数发行版的软件包pipe理器中存在的networking安全字体包,那么Linux用户也将获得Verdana,否则他们将回退到普通的无衬线字体。

而且这不太可能 – EOT是一个相当严格的格式,只有IE支持。 Safari 3.1和Firefox 3.1(以及目前的alpha)以及可能的Opera 9.6都支持真正的字体(ttf)embedded,并且至lessSafari通过相同的机制支持SVG字体。 一个分开的名单有一个很好的讨论这个回来 。

查看Typekit ,一个商业选项(他们也有免费套餐)。

它使用不同的技术,取决于使用哪种浏览器( @font-faceEOT格式),并且他们也会为您处理所有的字体许可问题。 它支持一切到IE6。

以下是有关Typekit工作原理的更多信息:

我问了一会儿 。 答案基本上是不起作用的。 🙁