10

我注意到从 Chrome 到 Safari/Firefox 的 Open Sans（Google Web 字体）的渲染存在显着差异。我附上了两张照片，第一张是 chrome，第二张是 safari。

我在样式表中只有：

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

希望您能提供帮助，因为我真的很喜欢 chrome（第一张图片）渲染，但讨厌另一个！

铬合金

Safari/火狐

4

6 回答 6

6

添加到头部 

<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;
}
于 2013-04-03T04:39:38.813 回答
2

过去，我很幸运地使用font-weight: lighter!important;了看起来更粗、与预期外观完全不同的字体。每个浏览器对字体的解释都不同。Google Web Fonts 尽最大努力提供正确的版本，但有时浏览器和操作系统之间会发生巨大的变化。

希望这些信息有帮助！让我知道这个解决方案是否有效，否则我可以进一步研究。Open Sans 是一款不错的网页字体，不错的选择 :)

于 2012-10-29T05:24:52.097 回答
2

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

<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 中调用没有大小的字体，然后将其定义为粗体，这是一种不起作用的方法。

于 2015-07-15T15:47:10.350 回答
1

存在一个问题，即Safari 以固定大小呈现字体，而其他浏览器更准确地呈现它们：

tech.Ozake.com 上的示例

因此，如果您要求文本的大小介于 Safari 的两个步骤之间，您将在 Safari 中获得与在其他浏览器中不同的结果。

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

于 2014-11-30T12:28:11.130 回答
0

这种解决方法帮助我使 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 强制使用更“大胆”的字体版本

于 2020-01-10T12:22:30.580 回答
-2

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

于 2012-10-29T00:19:02.813 回答