在Web浏览器上使用.otf字体

Question

我正在开发一个需要在线进行字体试用的网站，我手上有的字体都是 .otf 格式的。

是否有一种方法可以嵌入这些字体并在所有浏览器上正常工作？

如果不行，我还有哪些其他选择？

- Naruto

---

这里的标签列表中是否应该移除JavaScript？ - kzh

Answer 1

你可以使用@font-face来实现你的OTF字体，例如：

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("path/GraublauWebBold.otf") format("opentype");
}

// 编辑：现在大多数浏览器都支持OTF字体，请见评论

然而，如果你想要支持广泛的浏览器，我建议你切换到WOFF和TTF字体类型。每个主要的桌面浏览器都实现了WOFF类型，而TTF类型是旧版Safari、Android和iOS浏览器的后备。如果你的字体是免费的字体，你可以使用例如Transfonter进行转换。

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

如果你想要支持几乎所有仍在使用的浏览器（在我看来现在已经不再必要了），你应该添加一些更多的字体类型，例如：

@font-face {
    font-family: GraublauWeb;
    src: url("webfont.eot"); /* IE9 Compat Modes */
    src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("webfont.woff") format("woff"), /* Modern Browsers */
         url("webfont.ttf")  format("truetype"), /* Safari, Android, iOS */
         url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}

你可以在这里阅读有关所有这些类型的实现及其技巧。要详细了解哪些浏览器支持哪些文件类型，请参见：

@font-face 浏览器支持

EOT 浏览器支持

WOFF 浏览器支持

TTF 浏览器支持

SVG-Fonts 浏览器支持

- choise

---

它在几乎所有浏览器上都运行得非常完美...唯一不能工作的浏览器是FireFox Linux...有任何建议吗？ - Naruto

请注意，如果您将其托管在Windows服务器上，则必须将.otf文件类型添加为有效且可服务的文件类型。唯一确认这是问题的方法是跟随字体的链接（如果是404错误）。您可以暂时将其重命名为.ttf甚至.html进行测试。IE仅支持WOFF格式的网络字体。（没错，我也从未听说过！） - Henrik Erlandsson

嘿，这种字体的性能如何？它好吗？还是其他更好？ - Anggie Aziz

似乎现在OTF应该几乎可以在所有平台上使用了。https://caniuse.com/#search=otf - Stephen

这是一个更好的批量文件转换器：https://transfonter.org/ - Harshal Parekh

Answer 2

来自Google字体库示例：

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

我认为这可以跨浏览器使用.ttf格式，同时.otf格式也可能有效（维基百科说.otf与.ttf基本兼容）。如果不行，你可以转换为.ttf格式。

以下是一些好的网站：

• 入门指南：

  http://www.alistapart.com/articles/cssatten

• 其他信息：

  http://randsco.com/index.php/2009/07/04/p680

- kzh