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

问题描述

我正在尝试找出一个不错的解决方案(尤其是从 SEO 方面)在网页中嵌入字体.到目前为止，我已经看到 W3C 解决方案，它甚至不适用于 Firefox，以及 这个非常酷的解决方案.第二种解决方案仅适用于标题.有全文的解决方案吗?我厌倦了网页的标准字体.

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.

谢谢！

推荐答案

事情发生了变化 自从最初提出并回答这个问题以来.在使用@font-face 嵌入使正文文本的跨浏览器字体嵌入工作方面已经做了大量工作.

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 整理了 Bulletproof @font-face 语法结合其他多人的尝试.如果你真的通读整篇文章(不仅仅是顶部)，它允许一个@font-face 语句涵盖 IE、Firefox、Safari、Opera、Chrome 和其他可能的内容.基本上，这可以以不破坏任何内容的方式输出 OTF、EOT、SVG 和 WOFF.

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.

摘自他的文章:

@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 工具包.

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 还整合了 FontFriend Bookmarklet，可即时重新定义页面上的字体所以你可以尝试一下.它包括 FireFox 3.6+ 中的拖放 @font-face 支持.

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+.

最近，Google 开始提供 Google 网络字体，这是在一个开源许可，由 Google 的服务器提供服务.

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.

许可限制

最后，WebFonts.info 整理了一个不错的 wiki 列表 字体可用于@font-face 嵌入 基于许可证.它并不声称是一个详尽的列表，但它上面的字体应该是可用的(可能有条件，例如 CSS 文件中的属性)用于嵌入/链接.阅读许可很重要，因为有一些限制在字体下载上没有明显推进.

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屋！