CSS /字体：与实时网站相比，获得的结果与预期完全不同

时间：2014-04-20 07:36:51

标签： html css fonts

我已经有一段时间没遇到这个问题，但是我注意到很多网站似乎都有......很难解释，他们的字体对他们来说有一种“强度”。像一个大胆，清晰，明确的定义。例如，我引用此页面：

CSS-TRICKS

enter image description here

它看起来很漂亮;即使我在这里嵌入的图像也不公平。花时间，我追踪确切的字体，确切的设置，确切的一切 - 我试图重现它，但我得到一个完全不同的结果，即使在同一个浏览器。

使用相同的字体，相同的尺寸，我所知道的相同内容，这就是我的结果。

enter image description here

我匹配的具体代码是字体，大小，重量和行高;这是; 

@import "http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic";

html {
    font-family: 'Noto Sans', sans-serif;
    font-size: 17px;
    line-height: 1.5;
}

我试图深入挖掘，并且使用FireFox我发现了更多的上下文，我尝试模拟它以及它提供的一些更具体的代码;哪个是...... 

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans"), local("NotoSans"), url("http://themes.googleusercontent.com/static/fonts/notosans/v4/LeFlHvsZjXu2c3ZRgBq9nD8E0i7KZn-EPnyo3HZu7kw.woff") format("woff");
}

但这继续提供相同的结果。

几乎每次我都试图从生产网站上重现那种清脆的感觉时，这种情况确实如此 - 而且我根本不知道发生了什么。任何人都可以向我解释为什么我的字体永远不会与这些网站匹配，即使使用相同的代码？

1 个答案:

答案 0 :(得分：1)

使用Firebug，您能否确认@import CSS实际上是通过网络获取的？

这是我在一个简单的测试页面中尝试使用Firebug控制台时的样子，该测试页面使我的系统上的字体很好:(我不允许发布图像，但你可以在这里看到屏幕截图： http://i.imgur.com/PW8nU3L.png）

以下是我正在测试的HTML：

<html>
<head>
    <style type="text/css">
        @import "http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic";

        html {
            font-family: 'Noto Sans', sans-serif;
            font-size: 17px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    Hello, world
</body>
</html>

您可能想要检查的另一件事是它是否是特定于浏览器的，即Chrome浏览器是否正常？

相关问题
最新问题