537

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

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

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

4

2 回答 2

932

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

// 编辑：OTF 现在可以在大多数浏览器中使用，请参阅注释

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

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

于 2010-07-14T10:20:16.187 回答
58

来自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

这里有一些不错的网站：

于 2010-07-14T10:39:36.297 回答