css - @font-face 仅在 Windows 上看起来很奇怪，但仅当 font-weight 为 400 时

Question

我正在使用字体 Signika .它在任何地方(Mac、Android、iOS)都能完美运行，除了 Windows(无论哪个版本)，它看起来奇怪地压扁了所有浏览器(IE、Firefox、Chrome、Opera):

那是在font-weight: 400。但是当我将 font-weight 更改为 100 时，我得到了 Signika 的精简版，完美呈现。

为什么？

到目前为止，我的解决方法是检测用户是否使用 Windows 并将 font-weight 更改为 100，然后使用 text-shadow 伪造额外的粗细)，但我仍然想知道问题的根源。

@font-face {
    font-family: "Signika";
    src: url("fonts/signika-webfont.eot");
    src: url('fonts/signika-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/signika-webfont.woff') format('woff'),url('fonts/signika-webfont.ttf') format('truetype'),url('fonts/signika-webfont.svg#Signika') format('svg');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Signika";
    src: url("fonts/signika-light-webfont.eot");
    src: url('fonts/signika-light-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/signika-light-webfont.woff') format('woff'),url('fonts/signika-light-webfont.ttf') format('truetype'),url('fonts/signika-light-webfont.svg#Signika') format('svg');
    font-style: normal;
    font-weight: 100;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Signika, sans-serif;
    color: #181818;
    font-weight: 400;
    clear: both;
}

编辑:

我从 Font-Squirrel 重新下载了 .eot 和 .woff 文件。我还发现了一些奇怪的事情:当我随后在 browserstack.com(指定 Windows 8.1 和 Chrome 35)和 browsershots.org(指定 Chrome 35)上测试我的网站时，字体呈现得很好。但是当我借用我姐姐的电脑(Windows 8.1)并使用 Chrome 35 检查我的网站时，字体奇怪地被压扁了。所以我现在正在设置虚拟主机。

Answer 1

我今天遇到了完全相同的问题。这是由 font-squirrel 转换器引起的。

当您选择专家模式时，确保Truetype Hinting设置为Font Squirrel并且X-height Matching为none。将这些选项中的任何一个设置为不同的东西都会削弱字体。我不确定其他模式(基本模式和最佳模式)的作用，但您可能需要使用专家来确定。

刷新浏览器缓存后，字体在 Windows 上运行良好。