在Web浏览器上使用.otf字体

2 回答

• 41

  您可以使用@ 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");
  }
  

  但是，如果您想支持 wide variety of modern browsers ，我建议您切换到 WOFF 和 TTF 字体类型 . WOFF 类型由每个主要桌面浏览器实现，而 TTF 类型是旧版Safari，Android和iOS浏览器的后备版本 . 如果您的字体是免费字体，您可以使用例如onlinefontconverter转换您的字体 .

  @font-face {
      font-family: GraublauWeb;
      src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
  }
  

  如果你想 support nearly every browser that is still out there （不再需要恕我直言），你应该添加更多的字体类型，如：

  @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 Browser Support

  EOT Browser Support

  WOFF Browser Support

  TTF Browser Support

  SVG-Fonts Browser Support

  希望这可以帮助

  回复于 2024-04-27T13:57:18+08:00
• 570

  从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

  这是一些很好的网站：

  • 好底漆：

  http://www.alistapart.com/articles/cssatten

  • 其他信息：

  http://randsco.com/index.php/2009/07/04/p680

  回复于 2024-04-27T13:57:18+08:00