首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在web浏览器上使用.otf字体

在web浏览器上使用.otf字体
EN

Stack Overflow用户
提问于 2010-07-14 18:13:14
回答 2查看 637K关注 0票数 521

我在一个网站上工作,需要在线字体试验,我有的字体都是.otf

有没有一种方法可以嵌入字体并让它们在所有浏览器上工作?

如果没有,我还有其他选择吗?

EN

回答 2

Stack Overflow用户

发布于 2010-07-14 18:20:16

您可以使用@ OTF -face实现您的字体,如下所示:

代码语言:javascript
复制
@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现在可以在大多数浏览器中使用,请参阅注释

但是,如果你想支持各种各样的浏览器,我建议你切换到WOFFTTF字体类型。每个主要的桌面浏览器都实现了WOFF类型,而TTF类型是旧的Safari和iOS浏览器的后备。如果你的字体是自由字体,你可以使用例如transfonter转换你的字体。

代码语言:javascript
复制
@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

如果你想支持几乎所有仍然存在的浏览器(不再需要),你应该添加一些更多的字体类型,比如:

代码语言:javascript
复制
@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 */
}

您可以阅读更多关于为什么实现所有这些类型以及它们的here的信息。要获取哪些浏览器支持哪些文件类型的详细视图,请参阅:

@font-face Browser Support

EOT Browser Support

WOFF Browser Support

TTF Browser Support

SVG-Fonts Browser Support

票数 910
EN

Stack Overflow用户

发布于 2010-07-14 18:39:36

来自Google Font Directory示例:

代码语言:javascript
复制
@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的)如果不是,你可以convert .otf到.ttf

这里有一些很好的网站:

  • Good primer:

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

  • Other信息:

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

票数 57
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3245141

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档