如何在HTML中嵌入字体？

小编典典

如何在HTML中嵌入字体？

javascript

我试图找到一个体面的解决方案（尤其是从SEO方面），用于在网页中嵌入字体。第二种解决方案仅适用于标题。是否有针对全文的解决方案？我已经厌倦了网页的标准字体。

谢谢！

阅读 934

2020-05-01

共1个答案

小编典典

*自从最初提出并回答这个问题以来，*情况已经发生了变化。对于使用@font-face嵌入来使正文文本起作用的跨浏览器字体嵌入，已经进行了大量工作。

基本上，这可以不破坏任何内容的方式提供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 kits。

Soma Design还将FontFriend Bookmarklet放在一起，该书签在运行中重新定义了页面上的字体，因此您可以尝试一下。它包括FireFox 3.6+中的拖放@ font-face支持。

最近，Google开始提供Google Web字体，这是一种字体，可以根据开放源代码许可使用，并且可以通过Google的服务器提供。

许可限制

最后，WebFonts.info整理了一个漂亮的Wiki 字体列表，可用于基于许可证的@ font-face嵌入。它并不声称是详尽无遗的列表，但其上的字体应该可用（可能带有CSS文件中的属性等条件）进行嵌入/链接。阅读

2020-05-01