在Chrome中打开无法使用Google Web字体呈现

Question

我注意到从Chrome到Safari / Firefox的Open Sans（谷歌网络字体）的重新发送存在显着差异。我附上两张照片，第一张是铬和第二张狩猎。

样式表中的所有内容都是：

        font-family: 'Open Sans', sans-serif;
        font-size:14px;

希望你能提供帮助，因为我非常喜欢chrome（第一张图片）渲染，但却讨厌另一张!!

Answer 1

添加到头

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

CSS规则

.btn{
    font-family: 'Open Sans', sans-serif;
    font-weight:300;
    text-rendering: optimizeLegibility;
font-size: .9em;
}

Answer 2

我过去很幸运，使用font-weight: lighter!important;字体看起来更大胆，完全不同于它们的样子。每个浏览器以不同方式解释字体Google Web Fonts尽力提供正确的版本，但有时浏览器和操作系统之间会有很大的变化。

希望这些信息有所帮助！如果此解决方案有效，请告诉我，否则我可以进一步研究。 Open Sans是一个不错的字体，很不错的选择：）

Answer 3

我直接在我的标题中添加了这一行，它正在运行！

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

.nav > li > a {
    color: #000; font-size: 13px; font-weight: 600;
}

不是只调用Header中没有大小的字体，而是将其定义为粗体，而是一种不起作用的方法。

Answer 4

有一个问题， Safari会以固定尺寸呈现字体，而其他浏览器会更准确地呈现这些字体：

example at tech.Ozake.com

因此，如果您要求自己的文字大小落在Safari的两个步骤之间，那么您在Safari 中会得到不同的结果浏览器。

因此，根据您声明字体大小以及窗口大小的方式，您将获得不同大小的结果。

Answer 5

此变通办法帮助我使Open Sans在不同的浏览器中看起来非常接近。

<script>
function loadCss(path){
    var fileref=document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", path);

    document.getElementsByTagName("head")[0].appendChild(fileref);
}

if (ViewUtil.isChromeBrowser()) {
    loadCss('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
} else {
    loadCss('https://fonts.googleapis.com/css?family=Open+Sans:300,600');
}

我们正在为Chrome强制使用字体的“合并”版本

Answer 6

您显然没有重置默认浏览器CSS，请尝试明确设置font-weight。