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

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

有没有一种方法来嵌入字体，并让他们在所有浏览器上工作？

如果不是，我还有其他的替代方案吗？

---

你可以使用@ 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");
}

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

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

如果你想支持几乎所有仍然存在的浏览器 （不再需要IMHO），你应该添加更多的字体类型，如：

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

希望这可以帮助

---

从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）如果不是，可以将.otf转换为.ttf

这里有一些很好的网站：

好的底漆：

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

其他信息：

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

链接地址: http://www.djcxy.com/p/65047.html

上一篇: Using .otf fonts on web browsers

下一篇: face not working with Firefox, but working with Chrome and IE