您可以实施您的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
and TTF
字体类型。WOFF
每个主要桌面浏览器都实现了类型,而TTF
type 是旧版 Safari、Android 和 iOS 浏览器的后备。如果您的字体是免费字体,您可以使用例如转换器.
@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。要详细了解哪些浏览器支持哪些文件类型,请参阅:
@font-face 浏览器支持
EOT 浏览器支持
WOFF 浏览器支持
TTF 浏览器支持
SVG-字体浏览器支持