【发布时间】：2011-03-15 18:43:47
【问题描述】：
我在做一个需要在线字体试用的网站，我的字体都是.otf
有没有办法嵌入字体并让它们在所有浏览器上运行？
如果没有，我还有什么其他选择？
【问题讨论】：
-
也许javascript应该从这里的标签列表中删除？
【发布时间】：2011-03-15 18:43: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 现在可以在大多数浏览器中使用，请参阅 cmets
但是，如果您想支持多种浏览器，我建议您切换到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 */
}
您可以阅读更多关于为什么要实现所有这些类型以及它们的技巧here。要详细了解哪些浏览器支持哪些文件类型，请参阅：
【讨论】：
-
它在几乎所有浏览器上都运行良好......唯一不工作的浏览器是 FireFox Linux......有什么建议吗？？
-
请注意，如果您将其托管在 Windows 服务器上，则必须将 .otf 文件类型添加为有效且提供服务的文件类型。看到这是问题的唯一方法是点击字体的链接（如果是，则出现 404 错误）。您可以暂时重命名为 .ttf 甚至 .html 进行测试。 IE 唯一支持的网页字体是 WOFF 格式。 （不，也从未听说过！）
-
你好，这种字体的性能怎么样？好吗？还是其他更好？
-
代码示例中是否缺少引号 (
")？ -
现在看来 otf 应该几乎可以全面工作了 caniuse.com/#search=otf
来自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）如果没有，你可以 convert 将 .otf 转为 .ttf
这里有一些不错的网站：
【讨论】：