字体是没有得到加载

问题描述：

我喜欢这四条@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()？

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

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

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

答

您需要的字体的各种版本的它在所有的浏览器。你可以得到你所需要的字体文件，与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; 
}

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

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

答

使用的所有字体文件.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'); 
}

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

答

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

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

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

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

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

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

字体是没有得到加载

相关推荐