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

2023年5月20日 288次阅读

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

我的计算机上的“已安装的字体”中没有此字体,我想通过@ 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;
...
}

我在网站上使用普通/粗体/斜体字体的所有组合.

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

谢谢.

最佳答案 您上传的字体的字体系列名称标题为“CenturyGothicRegular”,因此您需要使用与Century Gothic相同的方式引用此引号：

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

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

点赞