Chrome 中的 Roboto 字体未正确显示

Posted 2023-03-05

【中文标题】Chrome 中的 Roboto 字体未正确显示

【英文标题】：Roboto font in Chrome is not shown properly

【发布时间】：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 哦，哇，我很高兴您的评论。这是缺失的部分。

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

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

【参考方案8】：

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

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