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

Question

我有网站:http://kuvaklubi.fi我在哪里尝试使用字体 "Century Gothic" .

此字体在我的计算机上不存在 "Installed fonts" ，我想通过 @font-face 将此字体嵌入到 css 中.

我在 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。