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

Question

我在做一个需要在线字体试用的网站，我的字体都是.otf

有没有办法嵌入字体并让它们在所有浏览器上运行？

如果没有，我还有什么其他选择？

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 */
}

您可以阅读更多关于为什么要实现所有这些类型以及它们的技巧 here .要详细了解哪些浏览器支持哪些文件类型，请参阅:

@font-face Browser Support

EOT Browser Support

WOFF Browser Support

TTF Browser Support

SVG-Fonts Browser Support