Roboto font bolder with Firefox

徘徊边缘 提交于 2019-12-07 07:36:36

问题


I try to install Roboto on my website, using Google Fonts, and I feel desperate to see that Roboto is bolder (much bolder) in Firefox than in Google Chrome.

Here are my codes :

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

And

p
{
    font-size: 1.4rem;
    line-height: 1.5;
    font-family: "Roboto", sans-serif;
    letter-spacing: 0;
    color: #313131;
}

And here are two preview of Roboto Font, first with Firefox, second with Chrome:

As you can see, the Chrome Roboto is much lighter.

I don't know why it happen, but I've find something on Google Font. Using Firebug on their own code, I discover that the Roboto Font used on their website has attributes :

element.style {
    font-family: "Roboto script=all rev=1";
}

And when you remove the "Script=all rev=1", Roboto become much bolder in Firefox and in Chrome (but so much in Firefox). Just like on my Work in progress.

Does somebody have an answer, a solution, or something? I feel lonely to see that not even Google can inform me about what is script=all rev=1 and why it makes Roboto much lighter on Google Font.


回答1:


The reason it is lighter is because Chrome is using a locally installed Roboto Font which does not have the bold version, and it is thus falling back to the thin version (rather than switching to the web font.) This is arguably a Chrome bug but I don't know of any existing report.

According to Force Chrome to use external font in CSS the special font name works because the Google Web Font stylesheet gives an alternate name for the font "Roboto script=all rev=1", which obviously doesn't exist on the user's local system and thus gets served by web font.



来源:https://stackoverflow.com/questions/39405766/roboto-font-bolder-with-firefox

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!