带有嵌入字体的 @font-face 不起作用

Question

我有网站：http://kuvaklubi.fi我正在尝试使用 font "Century Gothic"。

我的电脑上没有这种字体"Installed fonts"，我想通过 .css 将这种字体嵌入到 css 中@font-face。

我已经在http://www.fontsquirrel.com/生成了一些字体文件和 css， 但是我仍然遇到问题。我"Century Gothic"在IE9、FF4 浏览器中看不到字体。

CSS：

@font-face {
    font-family: 'CenturyGothicRegular';
    src: url('gothic-webfont.eot');
    src: url('gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('gothic-webfont.woff') format('woff'),
         url('gothic-webfont.ttf') format('truetype'),
         url('gothic-webfont.svg#CenturyGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;    
}

@font-face {
    font-family: 'CenturyGothicRegular';
    src: url('gothicbi-webfont.eot');
    src: url('gothicbi-webfont.eot?#iefix') format('embedded-opentype'),
         url('gothicbi-webfont.woff') format('woff'),
         url('gothicbi-webfont.ttf') format('truetype'),
         url('gothicbi-webfont.svg#CenturyGothicBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'CenturyGothicRegular';
    src: url('gothici-webfont.eot');
    src: url('gothici-webfont.eot?#iefix') format('embedded-opentype'),
         url('gothici-webfont.woff') format('woff'),
         url('gothici-webfont.ttf') format('truetype'),
         url('gothici-webfont.svg#CenturyGothicItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'CenturyGothicRegular';
    src: url('gothicb-webfont.eot');
    src: url('gothicb-webfont.eot?#iefix') format('embedded-opentype'),
         url('gothicb-webfont.woff') format('woff'),
         url('gothicb-webfont.ttf') format('truetype'),
         url('gothicb-webfont.svg#CenturyGothicBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

body {
    font-family: "Century Gothic", CenturyGothicRegular, Verdana, Tahoma, Helvetica, sans-serif;
...
}

我normal/bold/italic在网站上使用所有字体组合。

任何人都可以帮我看看发生了什么，为什么会发生，以及如何解决这个问题？

谢谢。

Answer 1

您上传的字体的字体系列名称标题为“CenturyGothicRegular”，因此您需要在引号中引用它，就像使用 Century Gothic 一样：

body {
    font-family: "Century Gothic", "CenturyGothicRegular", Verdana, Tahoma, Helvetica, sans-serif;
...
}

您还需要确保字体文件与 CSS 文件位于同一位置，或者更改文件名的相对 URL。