当前位置：文江博客话题详情

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

发布于 2024-09-09 21:03:42 字数 95 浏览 3 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

内心荒芜 2024-09-16 21:03:47

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

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

但是，如果您想支持多种浏览器 我建议您切换到 WOFF 和 TTF 字体类型。 WOFF 类型由每个主要桌面浏览器实现，而 TTF 类型是旧版 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 */
}

您可以阅读更多有关为什么实现所有这些类型以及它们的信息此处进行黑客攻击。要详细了解哪些浏览器支持哪些文件类型，请参阅：

You can implement your OTF font using @font-face like:

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

// Edit: OTF now works in most browsers, see comments

However if you want to support a wide variety of browsers i would recommend you to switch to WOFF and TTF font types. WOFF type is implemented by every major desktop browser, while the TTF type is a fallback for older Safari, Android and iOS browsers. If your font is a free font, you could convert your font using for example a transfonter.

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

If you want to support nearly every browser that is still out there (not necessary anymore IMHO), you should add some more font-types like:

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

You can read more about why all these types are implemented and their hacks here. To get a detailed view of which file-types are supported by which browsers, see:

@font-face Browser Support

EOT Browser Support

WOFF Browser Support

TTF Browser Support

SVG-Fonts Browser Support

回复收藏 0 原文

半衬遮猫 2024-09-16 21:03:47

从 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。（Wikipedia 表示 .otf 基本上向后兼容 .ttf）如果没有，您可以将 .otf 转换为 .ttf

以下是一些不错的网站：

好的入门指南：
http://www.alistapart.com/articles/cssatten
其他信息：
http://randsco.com/index.php/2009/07/ 04/p680

From the Google Font Directory examples:

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

This works cross browser with .ttf, I believe it may work with .otf. (Wikipedia says .otf is mostly backwards compatible with .ttf) If not, you can convert the .otf to .ttf

Here are some good sites: