字体不工作答案

【问题标题】：Font Face not working字体不工作
【发布时间】：2016-02-14 08:07:59
【问题描述】：

我想为我的网站添加字体，但代码有问题，我不知道是什么

@font-face {
  font-family: 'ostrich-regular-webfont';
  src: url('https://ostrichsans.googlecode.com/svn/ostrich-regular-webfont.eot');
  src: url('https://ostrichsans.googlecode.com/svn/ostrich-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('https://ostrichsans.googlecode.com/svn/ostrich-regular-webfont.woff2') format('woff2'),
       url('https://ostrichsans.googlecode.com/svn/ostrich-regular-webfont.woff') format('woff'),
       url('https://ostrichsans.googlecode.com/svn/ostrich-regular-webfont.ttf')  format('truetype'),
       url('https://ostrichsans.googlecode.com/svn/ostrich-regular-webfont.svg#ostrich-regular-webfont') format('svg');
}

    #contentmiddle h1 {
        font-family: 'ostrich-regular-webfont';
    }

【问题讨论】：

你试过下载它并在本地做同样的事情吗？

标签： html css fonts

【解决方案1】：

Ostrich Sans 是您可以在Font Squirrel 中免费获得的字体。下载它，然后选择您要使用的那个（我猜您想要常规的）。他们还有一个Webfont Generator，您可以在其中上传所选字体，它会自动生成在您的网站中使用该字体所需的代码，该字体托管在您自己的服务器中。

会是这样的：

@font-face {
    font-family: 'ostrich_sansmedium';
    src: url('ostrich-regular-webfont.eot');
    src: url('ostrich-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('ostrich-regular-webfont.woff2') format('woff2'),
         url('ostrich-regular-webfont.woff') format('woff'),
         url('ostrich-regular-webfont.ttf') format('truetype'),
         url('ostrich-regular-webfont.svg#ostrich_sansmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'ostrich_sansmedium';
}

您可以在CSS Tricks获取更多关于如何使用自定义字体的信息

【讨论】：

你的评论真的很有帮助，但由于某种原因它仍然不起作用，我不知道为什么。
可能有两个原因： 1. 您的#contentmiddle h1 选择器不正确。 2. 您正在从文件系统加载文件，即：file://path/index.html 而不是使用网络服务器，这样做不会让您从 googlecode.com 加载字体。你能分享你的 HTML 代码吗？
第二个原因我没看懂，反正这里是HTML代码pastebin.com/x3aJUryT

【解决方案2】：

试试这个：

#contentmiddle h1{
    font: 'ostrich-regular-webfont';
}

如果您希望字体作为整个网站的默认字体，请使用 body 标签。

body{
    font: 'ostrich-regular-webfont';
}

【讨论】：