Question

我有一些像这样的CSS：

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

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

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

有没有办法让它在没有@ font-face的所有服务器上使用相同的字体？

Answer 1

想出来......

此行正在从Google导入字体：

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

在生产服务器上，他们决定不允许这样的所有外部请求，因此无法加载字体。在我们的其他服务器上情况并非如此......

所以我从Google下载了字体，在http://www.fontsquirrel.com/tools/webfont-generator生成了webfonts，然后添加了以下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;

}

Answer 2

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

Answer 3

可能与浏览器在本地服务器和实时服务器中查找字体的方式有关。我之前在命名字体时遇到了问题＆＃34; Open Sans Condensed＆＃34; vs＆＃34; OpenSans-Condensed＆＃34; （这是一个不同的字体，但遵循相同的规则），这是字体文件名。所以也许您可以找到文件名并将其添加到您的＆＃39; font-family＆＃39;标签

浏览器在某些服务器上没有使用正确的字体

3 个答案: