在网络浏览器上使用.otf字体

440

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

有没有一种方法可以嵌入字体并使它们在所有浏览器上都能正常工作？

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

— 火影忍者
source

也许应该从此处的标签列表中删除javascript？

— kzh 2010年

754

您可以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字体类型。WOFF每种主流桌面浏览器都可以实现该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 */
}

您可以在此处详细了解为什么要实现所有这些类型及其破解。要详细了解哪些浏览器支持哪些文件类型，请参阅：

希望这可以帮助

— 选择
source

几乎在所有浏览器上都可以正常工作...唯一不起作用的浏览器是FireFox Linux ...对那个的任何建议？

— 火影忍者

请注意，如果将其托管在Windows服务器上，则必须将.otf文件类型添加为有效且可提供的文件类型。看到这是问题的唯一方法是跟随该字体的链接（如果是，则显示404错误）。您可以临时重命名为.ttf甚至是.html进行测试。IE支持的唯一Web字体是WOFF格式。（不，也从未听说过！）

— Henrik Erlandsson

嘿，这种字体的性能如何？好吗？还是其他更好？

— Anggie Aziz 2013年

"代码示例中是否缺少引号（）？

— steffen

似乎otf现在应该几乎可以全面使用caniuse.com/#search=otf

— Stephen

从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

— zh
source