css - 字体未加载

Question

我的 css 中有四个这样的 @font-face 规则:

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/Ubuntu-Regular.ttf) format('truetype');
}

文件结构如下:

/index.html
 css/
     ...
     fonts.css
     fonts/
           Ubuntu-Regular.ttf

当使用浏览器时，我可以访问 url css/fonts/Ubuntu-Regular.ttf 并且正在下载文件。但是，它没有由 css 加载的字体。我是否滥用了 url()？

Answer 1

您需要各种版本的字体才能在所有浏览器中使用。您可以在 FontSquirrel 站点获得所需的所有字体文件以及 CSS:

http://www.fontsquirrel.com/fonts/ubuntu

只需单击菜单中的“Webfont Kit”链接。

提供的 CSS 代码如下所示:

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