Html 在 Web 浏览器上使用 .otf 字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3245141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using .otf fonts on web browsers
提问by Naruto
I'm working on a website that requires font trials online, the fonts I have are all .otf
我在一个需要在线字体试用的网站上工作，我拥有的字体都是.otf
Is there a way to embed the fonts and get them working on all browsers?
有没有办法嵌入字体并让它们在所有浏览器上工作？
If not, what other alternatives do I have ?
如果没有，我还有什么其他选择？
回答by choise
You can implement your OTFfont using @font-face like:
您可以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");
}
However if you want to support a wide variety of modern browsersi would recommend you to switch to WOFFand TTFfont types. WOFFtype is implemented by every major desktop browser, while the TTFtype 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 onlinefontconverter.
但是，如果你想支持各种各样的现代浏览器我会建议您切换到WOFF和TTF字体类型。WOFFtype 由每个主要的桌面浏览器实现，而TTFtype 是旧版 Safari、Android 和 iOS 浏览器的后备。如果您的字体是免费字体，您可以使用例如onlinefontconverter转换您的字体。
@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:
您可以在此处阅读更多关于为什么要实现所有这些类型及其技巧的信息。要详细了解哪些浏览器支持哪些文件类型，请参阅：
hope this helps
希望这可以帮助
回答by kzh
From the Google Font Directoryexamples:
来自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;
}
This works cross browser with .ttf, I believe it may work with .otf. (Wikipediasays .otf is mostly backwards compatible with .ttf) If not, you can convertthe .otf to .ttf
这适用于 .ttf 的跨浏览器，我相信它可以与 .otf 一起使用。（维基百科说 .otf 主要与 .ttf 向后兼容）如果不是，您可以将.otf转换为 .ttf
Here are some good sites:
这里有一些不错的网站：
Good primer:
Other Info:
