Chrome 中的 Roboto 字体未正确显示答案

【问题标题】：Roboto font in Chrome is not shown properlyChrome 中的 Roboto 字体未正确显示
【发布时间】：2015-08-09 04:09:19
【问题描述】：

我一直在为客户网站工作，但在渲染 Roboto 字体时遇到问题。

在 Chrome（版本 43.0.2357.65 m）中，Roboto 的所有不同重量看起来都相同。这是示例：左边是 Mozilla Firefox，右边是 Chrome http://i.stack.imgur.com/dX4Lx.jpg

你知道它有什么问题吗？

谢谢

【问题讨论】：

这不会发生在我身上（Chrome 43.0.2357.81）。这是否也发生在您正在工作的网站上？你能检查一下谷歌字体网站上的元素并看看“font-family”属性吗？
Chrome 版本 43.0.2357.81 m 在这里很好
你确定你已经加载了你在应用程序中使用的所有不同粗细的 Roboto 字体吗？
<link href='http://fonts.googleapis.com/css?family=Roboto:400,900,700,500,300,100' rel='stylesheet' type='text/css'>
@VikramDeshmukh 哦，哇，我很高兴您的评论。这是缺失的部分。

标签： html css google-chrome web roboto

【解决方案1】：

我有相同的版本，它的工作。

尝试使用这段代码在 CSS 中包含字体

@import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);

body {
   font-family: 'Roboto', sans-serif;
}

并设置font-weight: 300; 为例，看看是否可行。

【讨论】：

【解决方案2】：

如果你使用@fontface evert浏览器使用不同的字体格式，那么完整的css是这样的：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

但是按照建议使用谷歌字体，你应该没有问题。

【讨论】：

【解决方案3】：

好吧，真可惜，但我的电脑上安装了旧版本的 Roboto。
自从我删除后，一切都恢复正常了。

我应该努力面对自己..

【讨论】：

正是我面临的问题。感谢您跟进您自己的问题的答案！

【解决方案4】：

我遇到了类似的问题。我注意到所有的周期都是方形的，而不是圆形的。下载Roboto font here 的新副本并将其重新安装到您的计算机上。

【讨论】：

【解决方案5】：

我遇到了同样的问题，对我来说有效的是校准我的显示器并且：

转到 chrome://flags/
加速 2D 画布 -> 启用
2D 画布 -> 启用重启 Chrome。

【讨论】：

【解决方案6】：

在我的例子中，对于一个希伯来语网站，font-weight 设置为 900，即使我正确地遵循了Google-Font's embedding rules，在 Firefox 和 Chrome 浏览器中的输出显示也不同：

//For example:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">

解决方案： 我刚刚将font-weight 更新为700 而不是900，这解决了这个问题。

【讨论】：

【解决方案7】：

如果您使用的是 Adobe 的 Creative Cloud，并且您将 Roboto 设置为字体，您可能会遇到 Chrome 中的所有内容然后都使用 Roboto Bold 的问题。我禁用了 Adobe Fonts 中的字体，它解决了我的问题，但在 GMAIL 等谷歌产品中，无衬线字体是粗体的，你不能关闭粗体。我不知道为什么，也找不到任何关于如何解决这个问题的好信息。

【讨论】：

【解决方案8】：

https://stackoverflow.com/a/27383566/11417534 为我解决了这个问题。

只需从字体请求中删除协议声明（http:// 或 https://）。

【讨论】：