Question

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

// 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;
}

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

要解决此问题，您可以设置虚假local引用。

请参阅Paul Irish's Bulletproof @font-face syntax

修改

您可以尝试另外两件事：

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

从声明中删除以下内容：

font-weight: normal; font-style: normal; font-size: 0.5em;

无法使font-face正常工作

3 个答案: