css - 字体未正确呈现/字体不工作？

Question

我希望我在正确的地方问这个问题，

我正在为一个 friend 开发一个网站，这是在我的 goDaddy acc 上托管的网站:

http://www.andkensol.com/rowanWeb/

这是我的 friend :

http://www.rowanmoore.org/

您可以看到标题字体的明显差异。如果您检查它们，您会发现它们都在使用 CODE。我亲自上传了所有文件，文件结构、布局、文件路径都完全相同，但字体不会在我 friend 的网站上呈现。

我从 font squirrel 下载了字体，并使用 @font face 在两个站点中实现它。

CSS

@font-face {
    font-family: CODE;
    src: url('font/CODE Light.otf');
}

#nameTitle{
    font-size:60px;
    font-family:CODE;
    color:white;
    font-weight:400;
    margin-bottom:-3%;
}

“字体文件夹”与样式表位于同一文件夹中，CODE Light.otf 位于字体文件夹中。

我从我 friend 的服务器上删除了这个网站，从我的服务器上下载了它，然后上传给我的 friend ，但仍然没有成功。

这可能是 goDaddy 端的问题吗？

Answer 1

我推荐你使用一些webgenerator来生成不同格式字体的css文件。 我认为你的问题是错误的@font-face。

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

不同的浏览器需要其他格式来渲染和打开字体。

我主要使用那三个网络字体生成器 http://onlinefontconverter.com/

http://www.fontsquirrel.com/tools/webfont-generator

http://convertfonts.com/

但是还有更多，输入给大叔google“字体生成器”

编辑: 我认为 font/CODE Light.otf 中的空白是问题尝试使用例如这样的 font/CODE_Light.otf