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

使用浏览器时，我可以访问网址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;
}

Answer 2

你可以试试这个。只是在html head标签中的代码下面有害生物

http://fonts.googleapis.com/css?family=Ubuntu:300,400'rel =''stylesheet'type ='text / css'＆gt;

＆安培;在你的css特定类中添加以下元素

font-family：'Ubuntu'，sans-serif;

因为Ubuntu是谷歌字体，所以你不需要使用字体。您可以直接使用 http://www.google.com/fonts/ - 此网站

中的字体

Answer 3

为所有浏览器使用所有字体文件.eot，.woff，.ttf ..

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

字体未加载

3 个答案: