css - 无法使字体工作

Question

我正在尝试使用 @font-face，但不是很成功。到目前为止，我一直在使用 Google 字体:

// HTML header
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>

//CSS
#leftSection nav { 
  font-family: "Cuprum", Verdana, Arial, sans-serif;
} 

然后我下载了字体并尝试使用font-face:

这是我的 CSS:

@font-face {
  font-family: 'Cuprum';
  font-weight: normal;
  font-style: normal;
  font-size: 0.5em;
  src: url('cuprum.eot?') format('eot'), 
       url('cuprum.woff') format('woff'), 
       url('cuprum.ttf')  format('truetype'),
       url('cuprum.svg#Cuprum') format('svg');
}


#leftSection nav { 
  font-family: "Cuprum", Verdana, Arial, sans-serif;
} 

字体与 CSS 位于同一文件夹中。

我查看并测试了其他解决方案，但仍然无法正常工作。

我正在使用以下浏览器进行测试:FF7、IE8

更新
我添加了 font-size: 0.5em; 这至少应该改变字体大小。但这也没有发生。所以我猜整个 @font-face 都被忽略了。

Answer 1

您尝试过使用 Font Squirrel 生成器吗？只需上传字体，它就会为您完成一切，非常简单。

这是链接: http://www.fontsquirrel.com/fontface/generator