@ font-face与嵌入字体不工作 [英] @font-face with embedded font does not work

问题描述

我有网站： http://kuvaklubi.fi 我想使用字体世纪哥特式。

此字体在我的计算机安装的字体中不存在，我想嵌入此字体在css中通过 @ font-face 。

我已经生成了一些字体文件和css http://www.fontsquirrel.com/
但是我还是有问题。我无法在 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; 
 ... 
} 
  

c $ c>正常/ bold / italic 网站上的字体。

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

谢谢。

解决方案

您上传的字体的家族名称已命名为CenturyGothicRegular，因此您需要使用引号将其引用为与Century Gothic相同的方式：

  body {
 font-family：Century Gothic，CenturyGothicRegular，Verdana，Tahoma，Helvetica，sans-serif; 
 ... 
} 
  

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

I have website: http://kuvaklubi.fi where I'm trying to use font "Century Gothic".

This font is not present on my computer in "Installed fonts", and I'd like to embed this font in css via @font-face.

I have generated some font files and css at http://www.fontsquirrel.com/ however I'm still having problems. I can't see "Century Gothic" font in IE9, FF4 browsers.

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

I'm using all combinations of normal/bold/italic fonts on the site.

Can anybody help me see what is happening, why it's happening, and how to fix this?

Thanks.

解决方案

Your font-family name for the fonts you've uploaded has been titled "CenturyGothicRegular", so you need to refer to this in quotes in the same way you have with Century Gothic proper:

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

You also need to make sure the font files are in the same location as your CSS file, or change the relative URL for the file names.

这篇关于@ font-face与嵌入字体不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！