如何在HTML中嵌入字体？

80

我试图找到一个不错的解决方案（尤其是从SEO方面），以便在网页中嵌入字体。到目前为止，我已经看到了W3C解决方案，该解决方案甚至在Firefox上也无法使用，并且该解决方案非常酷。第二种解决方案仅适用于标题。是否有针对全文的解决方案？我已经厌倦了网页的标准字体。

谢谢！

— 丹·罗森斯塔克
source

X-Ref如何向网站添加一些非标准字体？

— hakre

Web上的字体的

— user2284570 2014年

2

@ user2284570这个问题有一个更好的答案。我已经关闭了另一个作为副本。

— 马达拉的幽灵

关于这个问题的最新答案吗？所有答案都有超过五年的历史了。另外，如果有人知道，我找不到MDN的参考。

— 1.21吉瓦

请提供更新的答案并帮助世界。自2011年以来，我还没有做过HTML

— Dan Rosenstark

134

自从最初提出并回答这个问题以来，情况已经发生了变化。对于使用@ 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") 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文件中的属性等条件）进行嵌入/链接。阅读许可证很重要，因为存在一些限制，这些限制在字体下载上并没有明显地推进。

— 围栏
source

11

我认为值得强调的是，即使您合法且花了很多钱购买了该字体的许可证，也不会自动允许您使用该字体并使用@ font-face-ize。您需要检查字体的许可证，以了解是否允许这种电子重新分发。侵权非常容易发现和追踪，否则可能很容易造成麻烦，特别是如果您是一家位于正确管辖权内的公司。

— Pekka

FontSquirrel在其预先构建的字体工具包和生成器中都明确指出了这一点（这要求您验证字体是否已获得此类使用的许可）。还有其他转换工具，但我不知道哪些工具值得讨论许可。

— fencepost

令人着迷的东西。出于好奇，您是如何找到此帖子的？同一天有多个答案，而您的答案有数条评论。+1 ...

— Dan Rosenstark 09年

1

我不记得我是如何结束的-也许搜索HTML字体，但我之所以回应是因为我在圣诞节前才为客户进行此工作，因此信息是新鲜的。我认为Pekka在旧帖子上将其视为新活动；我不知道系统标记是否尝试发布多个链接（我知道它最初被阻止），但我认为这可能是“检查此内容以确保不是垃圾邮件”。

— fencepost

@Pekka“侵权非常容易发现和拖欠” ...您能给我一些启发吗，请...如何进行这种发现和拖网，在什么情况下会发生？

— Dan Rosenstark '02

9

尝试使用Facetype.js，将.TTF字体转换为Javascript文件。完全兼容SEO，支持FF，IE6和Safari，并在其他浏览器上正常降级。

— 马丁·梅克斯（Martin Meixger）
source

2

对于那些想知道它如何工作的人，它使用canvas标记（html 5）或VML。

— 克里斯S

1

我必须同意这种解决方案，它看起来非常简单，而且似乎可以在我扔给它的每种浏览器上使用。

— askon 2010年

1

该链接已死。

— aleclarson

6

不，没有适合体型的解决方案，除非您只愿意迎合那些使用尖端浏览器的人。

微软拥有WEFT，这是他们自己的专有字体嵌入技术，但多年来我从未听说过它，而且我不知道有人使用它。

我使用sIFR作为显示类型（标题，博客文章标题等），并对主体类型使用一种磨损较少的网络安全字体（例如Trebuchet MS）。如果您对所有网络安全字体都感到无聊，则可能是对这个术语的定义太狭窄了-查看主要操作系统附带的此库存字体矩阵，您将有可能找到一个可以级联的字体捕获几乎所有的Web用户。

例如：font-family: "Lucida Grande", "Verdana", sans-serif是常见的字体层叠；OS X附带了Lucida Grande，但装有Windows的用户将获得Verdana，这是一种网络安全字体，其字母和大小和形状与Lucida Grande相似。如果Linux用户已经安装了大多数发行版的程序包管理器中存在的Web安全字体程序包，那么他们还将获得Verdana，否则他们将退回到普通的sans-serif。

— 拯救钟楼
source

2

让我也站在肥皂盒上一分钟：尽管我希望Windows拥有更多的“好”字体（OS X的字体历史上最受欢迎的字体：Futura，Helvetica，Gill Sans等），但这是一件好事在选择字体时要克制自己。自由也可以用于邪恶。

— savetheclocktower

对您的评论没有评论，但感谢您的回答。那很棒。某处有一个小瀑布列表吗？再次感谢。

— 丹·罗森斯塔克

这里是一个列表：（ampsoft.net/webdesign-l/WindowsMacFonts.html）。这是保守的，仅列出跨平台相同（或几乎相同）的字体。您可能需要进行比较，以查看哪种“安全”字体最类似于“风险”字体。

— savetheclocktower

（哦，也：总是指定一个通用的备用

— 广告素材-sans

1

来到我工作的网站上的大多数用户仍然使用IE6（那些混蛋），因此从这个角度来看，我认为最新的主要版本正在不断发展。

— 基因

4

而且不太可能-EOT是一种限制性很强的格式，仅IE支持。Safari 3.1和Firefox 3.1（以及当前的alpha版本）以及Opera 9.6都支持真字体（ttf）嵌入，并且至少Safari通过相同的机制支持SVG字体。列表除了有关于这个一会儿好商量回。

— 奥利耶
source

3

查看Typekit，这是一个商业选项（它们也提供免费软件包）。

它使用不同的技术，具体取决于所使用的浏览器（@font-face与EOT格式），并且它们还可以为您解决所有字体许可问题。它支持所有版本的IE6。

以下是有关Typekit如何工作的更多信息：

— 飞乐
source

2

我前一段时间问过这个。答案基本上是它不起作用。:(

— 马库斯·唐宁
source