Question

我在我的H1文字中使用了Google网络字体，而且我的屏幕上的文字看起来非常像素化。

    <link href='http://fonts.googleapis.com/css?family=Forum&v2' rel='stylesheet'    type='text/css'>

    <style media="screen" type="text/css">

    h1 {
    color:#544E4F;
    font-family: 'Forum', cursive;
    text-align:center;
    margin: auto;
    font-size:210%;
    }

    </style>

提前致谢！

Answer 1

长期遭遇同样的问题后，经过大量研究后，我终于做了以下事情：

我找到了http://www.fontsquirrel.com
我下载了我正在使用的（像素化）字体（Exo系列）
我将其上传到我的网站
我在本地引用它以避免使用Google字体（您可以通过下载fontsquirrel.com上提供的@ font-face Kit来实现此目的。）

Answer 2

对我来说看起来不错。但请注意h1收到样式：

font-weight: bold;

在大多数浏览器的默认样式表中。由于您只有可用字体的正常重量变体，因此浏览器必须从法线自动合成粗体。有各种不同的自动粗体化方法，不同的质量水平，但它永远不会像真正设计的大胆那样好。也许你得到了一个合成不佳的字体变体。

如果您想使用论坛标题，我建议添加规则：

font-weight: normal;

允许浏览器使用常规的，未经修改的字体。或者，如果你真的想要那么大胆，那么最好选择一种实际上具有大胆重量的不同字体。

另一种可能性是你在系统级别关闭了抗锯齿，并且它被覆盖了普通的浏览器字体而不是网页字体。如果那是问题所以你可以尝试覆盖其他一切，例如：

font-smooth: always;
-webkit-font-smoothing: antialiased;

尽管忽视用户的偏好是否真的是一个好主意是值得怀疑的，但是对于WebKit来说，它是否应该subpixel-antialiased是有争议的......

Answer 3

好吧，我只是把它们扔到那里，但是......

我最好的猜测是使用em而不是％来表示字体大小。例如，font-size：4.5em。

也许尝试使用div而不是h1，但我怀疑这会做很多事情。

Answer 4

尝试添加此内容：

h1 {
text-shadow:0 0 1px transparent;
}

谷歌Web字体 - 扭曲

4 个答案: