无法使字体正常工作

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

Answer 2

嘿史蒂文你搞定了吗？
你为什么不试试这个呢。

将其插入到你的CSS中：

@font-face {
font-family: 'Cuprum';
font-style: normal;
font-weight: normal;
src: local('Cuprum'), url('http://themes.googleusercontent.com/static/fonts/cuprum/v1/sp1_LTSOMWWV0K5VTuZzvQ.woff') format('woff');
}

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

我希望它能起作用。 :)

Answer 3

我认为您可以尝试不使用 "Cuprum" 周围的引号。

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

此外，如果您/用户在本地安装了该字体，有时也会出现问题。

为了解决这个问题，您可以设置一个假的本地引用。

请参阅 Paul Irish 的 Bulletproof @font-face 语法

编辑< /strong>

您可以尝试的另外两件事：

1. 将字体名称更改为小写，cuprum。

2. 从声明中删除以下内容：

   字体粗细：正常；
   字体样式：正常；
   字体大小：0.5em；