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

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

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

如果没有，我还有什么其他的select？

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

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

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

如果你想支持几乎所有仍然存在的浏览器 （恕我直言，恕我直言），你应该添加更多的字体types，如：

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

你可以阅读更多关于为什么所有这些types被实现和他们的黑客在这里 。 要详细了解哪些浏览器支持哪些文件types，请参阅：

@ font-face浏览器支持

EOT浏览器支持

WOFF浏览器支持

TTF浏览器支持

SVG字体浏览器支持

希望这可以帮助

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

这里有一些很好的网站：

• 好的底漆：

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

• 其他信息：

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