0

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

@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

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

4

3 回答 3

3

您需要各种版本的字体才能在所有浏览器中工作。您可以在 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;
}
于 2013-05-06T13:03:45.617 回答
1

你可以试试这个。只需在您的 html 头标记中破坏以下代码

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

并在您的 css 特定类中添加以下元素

字体家族：'Ubuntu'，无衬线；

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

于 2013-05-06T13:30:37.747 回答
0

为所有浏览器使用所有字体文件.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'); 
}
于 2013-05-06T13:02:12.083 回答