从谷歌字体目录的例子:

@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。(维基百科说。otf主要向后兼容。ttf)如果不是，你可以将。otf转换为。ttf

以下是一些不错的网站:

很好的引物: http://www.alistapart.com/articles/cssatten 其他信息: http://randsco.com/index.php/2009/07/04/p680

你可以像这样使用@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现在可以在大多数浏览器中工作，见注释

然而，如果你想要支持多种浏览器，我建议你切换到WOFF和TTF字体类型。WOFF类型被每一个主要的桌面浏览器实现，而TTF类型是老式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 */
}

你可以在这里阅读更多关于为什么要实现所有这些类型以及它们的技巧。要获得哪些浏览器支持哪些文件类型的详细视图，请参见:

浏览器支持

EOT浏览器支持

WOFF浏览器支持

TTF浏览器支持

svg字体浏览器支持

从谷歌字体目录的例子:

@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。(维基百科说。otf主要向后兼容。ttf)如果不是，你可以将。otf转换为。ttf

以下是一些不错的网站:

很好的引物: http://www.alistapart.com/articles/cssatten 其他信息: http://randsco.com/index.php/2009/07/04/p680