Html 字体（Roboto）在Chrome上比Firefox（Windows）更大胆

我通过我的web应用程序广泛使用Roboto字体。我在Linux上开发，一切都很好，但是我检查了一下它在Windows上是否看起来一样，但事实并非如此。在Windows中，Chrome字体更粗体、更难看，在Opera中也是如此。只有在Firefox中，它看起来才正常（就像Linux中的每个浏览器一样）。我甚至制作了一把小提琴，并在两个浏览器上进行了比较：

Linux上的Chrome和Windows上的Firefox很像，这是应该的

---

我能做些什么来解决这个问题吗？大多数人都会在Windows Chrome上使用我的应用程序，我一点也不喜欢它的字体。从图片上看，它看起来并没有那么糟糕，但在live app中，它起到了很大的作用。

在您的chrome中键入此项，以启用2G用于web字体加载

 chrome://flags/#enable-webfonts-intervention-v2

在代码中使用css重置：

或者，您可以创建jquery函数来检测使用的浏览器，并将class.chrome应用到body，从而将字体更改为粗体

function setBrowserClasses() {
    $.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase());
    if (true === $.browser.chrome) {
        $('body').addClass('chrome');
    }
}

---

Firefox可能在所有系统上使用相同的文本呈现，而Chrome则使用system one

文本渲染引擎非常复杂，每个系统都有不同的算法和默认值。他们不会给出相同的结果，除非在高像素密度的屏幕上，这样就不需要网格拟合启发式

windows堆栈的一个特点是它不能很好地处理未修改的字体，请确保为其提供提示字体

---

否则，就接受它们是不同的，这对它们的用户来说是好的。在windows中使用windows风格文本渲染的人不会抱怨你的应用程序不够Linux。

试试：

body{-webkit字体平滑：抗锯齿；-moz-osx字体平滑：灰度；}

我尝试过调整-webkit字体平滑，但没有任何区别。值得一提的是，屏幕截图中的字体是Arial字体，用作“无衬线”回退。默认情况下，Roboto没有安装在Windows上（但可以用作web字体，看起来很棒）。这是很久以前的事了，但实际上fiddle附带了Roboto CSS。在参考资料中向左看。

function setBrowserClasses() {
    $.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase());
    if (true === $.browser.chrome) {
        $('body').addClass('chrome');
    }
}