在web浏览器上使用.otf字体
在web浏览器上使用.otf字体
提问于 2010-07-14 18:13:14
我在一个网站上工作，需要在线字体试验，我有的字体都是.otf
有没有一种方法可以嵌入字体并让它们在所有浏览器上工作？
如果没有，我还有其他选择吗？
回答 2
Stack Overflow用户
发布于 2010-07-14 18:20:16
您可以使用@ OTF -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字体类型。每个主要的桌面浏览器都实现了WOFF类型，而TTF类型是旧的Safari和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 */
}您可以阅读更多关于为什么实现所有这些类型以及它们的here的信息。要获取哪些浏览器支持哪些文件类型的详细视图，请参阅：
Stack Overflow用户
发布于 2010-07-14 18:39:36
@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信息：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3245141
复制相关文章
相似问题
腾讯云开发者
