如何在HTML中嵌入字体？ [英] How to embed fonts in HTML?

问题描述

我试图找出一个体面的解决方案（特别是从SEO方面）在网页中嵌入字体。到目前为止，我已经看到 W3C解决方案，它甚至不能在Firefox上工作，而这个很酷的解决方案。第二种解决方案仅适用于标题。有没有可用于全文的解决方案？我厌倦了网页的标准字体。

谢谢！

解决方案。使用@ font-face嵌入功能，使得正文文本的跨浏览器字体嵌入功能得到了大量的工作。

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）格式（woff），
 url（GraublauWeb .otf）格式（opentype），
 url（GraublauWeb.svg＃grablau）格式（svg）; 
 
  

从这个基础开始，字体松鼠汇集了各种有用的工具，包括 @ font-face Generator ，它允许您上传TTF或OTF文件，并获得其他类型的自动转换字体文件，以及预建的CSS和演示HTML页面。字体松鼠也有数以百计的@ font-face套件。

Soma Design还整合了 FontFriend Bookmarklet ，它可以即时在页面上重新定义字体所以你可以尝试一下。它包括FireFox 3.6 +中的拖放@ font-face支持。

最近，Google已经开始提供 Google网络字体，这是一种根据开源许可证提供的各种字体，由Google的服务器提供。

最后，WebFonts.info将的维基列表放在一起。 /www.webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embeddingrel =noreferrer>基于许可证可用于@ font-face嵌入的字体。它并没有声称是一个详尽的列表，但它的字体应该可用（可能与条件，如CSS文件中的属性）嵌入/链接。 阅读许可证非常重要，因为在字体下载方面存在一些限制，无法明显推进。

I'm trying to figure out a decent solution (especially from the SEO side) for embedding fonts in web pages. So far I have seen the W3C solution, which doesn't even work on Firefox, and this pretty cool solution. The second solution is for titles only. Is there a solution available for full text? I'm tired of the standard fonts for web pages.

Thanks!

解决方案

Things have changed since this question was originally asked and answered. There's been a large amount of work done on getting cross-browser font embedding for body text to work using @font-face embedding.

Paul Irish put together Bulletproof @font-face syntax combining attempts from multiple other people. If you actually go through the entire article (not just the top) it allows a single @font-face statement to cover IE, Firefox, Safari, Opera, Chrome and possibly others. Basically this can feed out OTF, EOT, SVG and WOFF in ways that don't break anything.

Snipped from his article:

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

Working from that base, Font Squirrel put together a variety of useful tools including the @font-face Generator which allows you to upload a TTF or OTF file and get auto-converted font files for the other types, along with pre-built CSS and a demo HTML page. Font Squirrel also has Hundreds of @font-face kits.

Soma Design also put together the FontFriend Bookmarklet, which redefines fonts on a page on the fly so you can try things out. It includes drag-and-drop @font-face support in FireFox 3.6+.

More recently, Google has started to provide the Google Web Fonts, an assortment of fonts available under an Open Source license and served from Google's servers.

License Restrictions

Finally, WebFonts.info has put together a nice wiki'd list of Fonts available for @font-face embedding based on licenses. It doesn't claim to be an exhaustive list, but fonts on it should be available (possibly with conditions such as an attribution in the CSS file) for embedding/linking. It's important to read the licenses, because there are some limitations that aren't pushed forward obviously on the font downloads.

这篇关于如何在HTML中嵌入字体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！