在 Web 浏览器上使用 .otf 字体 [英] Using .otf fonts on web browsers

问题描述

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

I'm working on a website that requires font trials online, the fonts I have are all .otf

有没有办法嵌入字体并使它们在所有浏览器上都能正常工作?

Is there a way to embed the fonts and get them working on all browsers?

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

If not, what other alternatives do I have ?

推荐答案

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

You can implement your OTF font using @font-face like:

@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 现在适用于大多数浏览器，请参阅评论

// OTF now works in most browsers, see comments

但是，如果您想支持各种浏览器，我建议您切换到 WOFF 和 TTF 字体类型.WOFF 类型由每个主要的桌面浏览器实现，而 TTF 类型是旧版 Safari、Android 和 iOS 浏览器的后备.如果您的字体是免费字体，您可以使用例如 transfonter 来转换您的字体.

However if you want to support a wide variety of browsers i would recommend you to switch to WOFF and TTF font types. WOFF type is implemented by every major desktop browser, while the TTF type is a fallback for older Safari, Android and iOS browsers. If your font is a free font, you could convert your font using for example a transfonter.

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

如果您想支持几乎所有仍然存在的浏览器(恕我直言不再需要)，您应该添加更多字体类型，例如:

If you want to support nearly every browser that is still out there (not necessary anymore IMHO), you should add some more font-types like:

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

您可以阅读更多关于实现所有这些类型的原因及其技巧 这里.要详细了解哪些浏览器支持哪些文件类型，请参阅:

You can read more about why all these types are implemented and their hacks here. To get a detailed view of which file-types are supported by which browsers, see:

@font-face 浏览器支持

EOT 浏览器支持

WOFF 浏览器支持

TTF 浏览器支持

SVG 字体浏览器支持

这篇关于在 Web 浏览器上使用 .otf 字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！