Question

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

"Installed fonts"我的计算机上没有此字体，我想通过@font-face将此字体嵌入到css中。

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

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。

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

1 个答案: