Html Chrome 中的 Roboto 字体未正确显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30476265/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Roboto font in Chrome is not shown properly
提问by Kailo
I've been working for a client site and I have problem with rendering of Roboto font.
我一直在为客户站点工作，但在渲染 Roboto 字体时遇到问题。
In Chrome (ver. 43.0.2357.65 m) all the various weights of Roboto looks same. Here is the example: Left is Mozilla Firefox, right is Chromehttp://i.stack.imgur.com/dX4Lx.jpg
在 Chrome (ver. 43.0.2357.65 m) 中，Roboto 的所有不同重量看起来都一样。这是示例：左侧是Mozilla Firefox，右侧是Chrome http://i.stack.imgur.com/dX4Lx.jpg
Do you have any idea what's wrong with it?
你知道它有什么问题吗？
thank you
谢谢你
回答by Kailo
Well, it's such a shame, but I have had old version of Roboto installed on my PC.
Since I deleted, everything works fine again.
好吧，真是太可惜了，但我的 PC 上安装了旧版本的 Roboto。
自从我删除后，一切又正常了。
I should facepalm myself hard..
我应该用力捂脸..
回答by hope
I have the same version and it's work.
我有相同的版本，它的工作。
Try to include font in CSS with this code
尝试使用此代码在 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;
}
And set the font-weight: 300;for exemple and see if that works.
并设置font-weight: 300;例如，看看是否有效。
回答by Germano Plebani
If you use @fontface evert browser use different font format so the complete css is like this:
如果你使用@fontface 浏览器使用不同的字体格式，所以完整的 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 */
}
But as suggested using google fonts you should have no problems.
但正如建议使用谷歌字体，你应该没有问题。
回答by spotr
I had a similar issue. I noticed that all periods are square, not circle. Download a fresh copy of Roboto font hereand reinstall it on your machine.
我有一个类似的问题。我注意到所有时期都是方形的，而不是圆形的。在此处下载Roboto 字体的新副本并将其重新安装到您的机器上。
回答by Daniela Todorova
I had the same issue, for me what worked was calibrating my monitors and:
我有同样的问题，对我来说有效的是校准我的显示器和：
- Go to chrome://flags/
- Accelerated 2D canvas -> Enable
- 2D canvas -> Enable Reboot Chrome.
- 转到 chrome://flags/
- 加速 2D 画布 -> 启用
- 2D 画布 -> 启用重启 Chrome。
回答by Reza Mamun
In my case, for a Hebrew site, the font-weightwas set to 900and the output was showing differently in Firefox and Chrome browsers even though I followed Google-Font's embedding rulesproperly:
就我而言，对于希伯来语站点，即使我正确遵循了Google-Font 的嵌入规则，在 Firefox 和 Chrome 浏览器中，font-weight设置为900并且输出显示不同：
//For example:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">
Solution:I have just updated the font-weightto 700instead of 900and this fixed the issue.
解决方案：我刚刚更新了font-weightto700而不是，900这解决了问题。
回答by Tony Zeoli
If you are using Adobe's Creative Cloud and you have Roboto set as a font, you may run into issues where all things in Chrome then get Roboto Bold. I disabled the font from Adobe Fonts and it fixed my issue, but in some Google products like GMAIL, Sans Serif is bolded and you can't turn off the bold. I don't know why and I can't find any good information on how to resolve that.
如果您使用 Adobe 的 Creative Cloud 并且将 Roboto 设置为字体，则可能会遇到 Chrome 中的所有内容都变成 Roboto Bold 的问题。我禁用了 Adobe Fonts 中的字体并解决了我的问题，但在 GMAIL 等一些 Google 产品中，Sans Serif 是粗体的，您无法关闭粗体。我不知道为什么，我找不到任何关于如何解决这个问题的好信息。
回答by William Abernathy
https://stackoverflow.com/a/27383566/11417534fixed this problem for me.
https://stackoverflow.com/a/27383566/11417534为我解决了这个问题。
Just delete the protocol declaration (http:// or https://) from the font request.
只需从字体请求中删除协议声明（http:// 或 https://）。
