2015-04-15 41 views
1

上我有一些CSS是这样的:浏览器使用不正确的字体某些服务器

font-family: "Open Sans Condensed",sans-serif; 

,我有一个很难理解的显示的字体是如何选择的。我一直认为浏览器检查客户端是否安装了第一种字体,如果没有,它会使用列表中的下一个字体。但是现在我遇到了一个问题:在我的本地和测试环境中,使用Firefox,第一种字体被使用,但在生产中,使用同一台机器上的相同浏览器,第二种字体被选中。

为什么网站在一台服务器上使用一种字体而在另一台服务器上使用另一种字体?

有没有什么办法让所有服务器都使用相同的字体而不使用@ font-face?

回答

1

想通了......

这条线是从谷歌导入字体:

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'> 

在生产服务器上,他们已经决定禁止所有类似的外部请求,因此它可以不加载字体。这不是我们的其他服务器上的情况下...

所以我donwloaded从谷歌的字体,在http://www.fontsquirrel.com/tools/webfont-generator产生的网络字体,然后添加下面的CSS:

@font-face { 
    font-family: 'Open Sans Condensed'; 
    src: url('../fonts/opensans-condbold-webfont.eot'); 
    src: url('../fonts/opensans-condbold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/opensans-condbold-webfont.woff2') format('woff2'), 
     url('../fonts/opensans-condbold-webfont.woff') format('woff'), 
     url('../fonts/opensans-condbold-webfont.ttf') format('truetype'), 
     url('../fonts/opensans-condbold-webfont.svg#open_sans_condensedbold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 
0

为什么不使用@ font-face?它得到了很好的支持和发明,以避免这类问题。请记住,出于安全原因,不适用于FF中的子域名。

+0

我结束了使用@ font-face,但最初,因为它没有它的工作,我想避免添加像这样的字体,以帮助性能。对我来说,当我使用完全相同的机器和浏览器来查看它时,它只能在一台服务器上运行,而不能在另一台服务器上运行。 – Chris

0

可能必须做的方式浏览器会在本地服务器和实时服务器中查找字体。我之前遇到过一个问题,那就是字体文件名是“Open Sans Condensed”与“OpenSans-Condensed”(它是不同的字体,但遵循相同的规则)。所以也许你可以找到文件名并将它添加到你的'font-family'标签中。

相关问题