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

Question

我正在一个需要在线字体试用的网站上工作,我所拥有的字体都是.otf

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

如果没有,我还有其他选择吗？

Answer 1

你可以OTF使用@ font-face 来实现你的字体,如:

@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");
}

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

@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字体浏览器支持

希望这可以帮助

Answer 2

从Google Font Directory示例中:

@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)如果没有,你可以将 .otf 转换为.ttf

这是一些很好的网站:

• 好的底漆:

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

• 其他信息:

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