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

Question

我有一些 css 这样的：

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

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

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

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

Answer 1

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

Answer 2

想通了...

这一行是从 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 3

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

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

Browser not using the right font on certain server

css

fonts