在 Chrome 中打开 Sans Google Web 字体渲染

Posted 2023-03-15

【中文标题】在 Chrome 中打开 Sans Google Web 字体渲染

【英文标题】：Open Sans Google Web Fonts Rendering in Chrome

【发布时间】：2012-10-18 08:12:15

【问题描述】：

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

我在样式表中只有：

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

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

【问题讨论】：

您是否已经按照fontspring.com/blog/smoother-web-font-rendering-chrome 应用了 Chrome 修复以首先列出 SVG 格式？这通常解决了一个相反的问题（Chrome 上的块状文本），但如果你没有，你应该把它放在适当的位置，然后看看效果图是什么样的。

相关问题***.com/questions/17867574/…

【参考方案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;

【讨论】：

添加到css页面顶部：-@import url(fonts.googleapis.com/css?family=Open+Sans:400,300);

【参考方案2】：

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

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

【讨论】：

您好帕克，感谢您的回复。不幸的是，这似乎不起作用！ :(还有其他想法吗？

嘿詹姆斯，不幸的是，没有很多选项可以修复浏览器之间的字体不一致问题。 Webkit 以糟糕的字体渲染而臭名昭著，但在这种情况下，它是 Firefox。您是否在 Google Fonts（视觉风格与 Open Sans 相同）上查看过更一致的类似字体？

嗨帕克。您确定是 Firefox，因为 Firefox 和 Safari 都以相同的方式显示字体。我喜欢的只是 Chrome 提供的渲染（以及它在 Google 字体上的显示方式）。

我认为 Firefox 出现故障，但现在我重新阅读了您的问题，可能是 Chrome 显示错误（在您的情况下，是的）。您是否尝试过其他字体以查看它们的呈现方式？ Raleway on Google Fonts 可能是一个不错的选择，它在 OSX 上的 Safari、Chrome 和 Firefox 上看起来一致：google.com/webfonts/specimen/Raleway

您还需要注意本地字体——如果您的系统上安装了该字体，则一个浏览器可能正在使用已安装的版本而不是 Web 字体。我遇到的另一个问题是来自 Google 的字体名称不一致，因此您可能要求使用 Open Sans，而样式表显示为 OpenSans，因此它会退回到系统字体。抱歉，我今天没喝够咖啡。

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

【讨论】：

唯一对我有用的解决方案！在 ios 9.3 上使用 Chrome

【参考方案4】：

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

example at tech.Ozake.com

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

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

【讨论】：

我在其他任何地方都没有看到这个文档，但你可以在示例中看到它是正确的。

【参考方案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 强制使用更“大胆”的字体版本

【参考方案6】：

您显然没有重置默认浏览器 CSS，请尝试显式设置字体粗细。

【讨论】：

我尝试了一些字体粗细，但它在 Chrome 中也完全改变了它！

我怀疑 Chrome 使用了谷歌提供的不同格式（谷歌提供另一种格式），其中一种格式构建不正确。