2013-05-06 31 views
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 

在使用浏览器,我可以达到网址css/fonts/Ubuntu-Regular.ttf和文件正在下载。但是,它没有被CSS加载的字体。我是否滥用url()

+1

你试图清除你的缓存吗? – Alarid 2013-05-06 12:45:36

+1

你看到了什么浏览器?您可能还需要对差异浏览器的不同支持,例如:WOFF和EOT文件 – Riskbreaker 2013-05-06 12:53:56

+0

您是否在CSS中为您需要的元素设置了font-family? – Rob 2013-05-06 13:42:45

回答

3

您需要的字体的各种版本的它在所有的浏览器。你可以得到你所需要的字体文件,与CSS一起,在FontSquirrel网站:

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

只需单击“web字体工具包”链接在菜单中。

提供的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; 
} 
+0

+1为http://www.fontsquirrel.com/ – mehdi 2013-05-06 13:07:37

+0

这是伟大的建议!它应该为我做。 – rubik 2013-05-06 19:59:51

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'); 
} 
+0

我没有所有这些版本,但使用@ ralph.m建议(fontsquirrel)我想我会解决这个问题。 – rubik 2013-05-06 20:00:25

1

你可以试试这个。只是害虫下面的代码在你的HTML头标记

http://fonts.googleapis.com/css?family=Ubuntu:300,400' 的rel = '样式' 类型= '文本/ CSS'>

&在你的css特定类中添加如下元素

font-family:'Ubuntu',sans-serif;

由于Ubuntu是谷歌字体,你不需要使用字体。你可以直接使用这个字体从http://www.google.com/fonts/ - 这个网站

+0

这就是我之前做的,但是因为我必须在没有互联网连接的PC上使用这些文件(它们是impress.js演示文稿的一部分),所以我只想在本地加载字体。 – rubik 2013-05-06 19:59:12