Firefox 和 IE 上的字体看起来与 Chrome 上的不同答案

【问题标题】：Fonts look different on Firefox and IE than on ChromeFirefox 和 IE 上的字体看起来与 Chrome 上的不同
【发布时间】：2017-10-20 01:05:09
【问题描述】：

我正在使用通过@font-face 加载的三种字体，它们看起来都应该在 Chrome 上使用，但在 Firefox 和 IE 上它们看起来不同。就像添加了额外的粗体一样，它们更加块状。

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-Regular';
    src: url('../fonts/montserrat-regular-webfont.woff2') format('woff2'),
         url('../fonts/montserrat-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('../fonts/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

我如何将这些字体应用于元素：

...
font-family: "OpenSans-Regular", sans-serif;
...

如果我使用开发工具在 Firefox 中编辑该元素并设置 font-family: Open Sans，那么它会正常工作。

这个问题让我很头疼，因为我不明白为什么会这样。

【问题讨论】：

在 CSS 注释中，不要将字体样式、粗细等放在您的字体系列名称中。它们是OpenSans、Montserrat 和Roboto，明确绑定到字体样式“常规”和字体粗细“正常”，因此您可以控制这些字体是否通过这三个值。您使用@font-face 来声明一个family，然后CSS 根据其他属性将该系列解析为单独的资源。这就是为什么您可以为同一个姓氏制定 20 条不同的规则，但权重/风格/等不同。组合。

标签： css google-chrome firefox fonts

【解决方案1】：

所有应用程序都是使用特定的代码块开发的。这就像 HTML 和 CSS 上的“默认字体”。在不同浏览器上打开的所有网页都会发生这种情况。试试这个东西 Facebook 您将看到 Chrome 和 Firefox 上的字体之间的区别。如果字体看起来比你想要的更粗，只需在 CSS StyleSheet 上使用“font-weight”。例如：

body.font-weight: xx px;

【讨论】：

我忘了添加示例图像。这不仅仅是“更大胆”。它没有圆边，只是看起来很胖，边缘锋利。您无法从屏幕截图中真正看出，因为它的质量很差，但它看起来确实是一种完全不同的字体。
这是一个网络浏览器问题。有一次我有一个 Web 开发项目，我的客户有一台 MacBook PRO，而网站在 Safari 上看起来完全不同。据我所知，这可能是浏览器问题

【解决方案2】：

迟到的回复，但这里有；在您的情况下，Firefox 将标题和其他一些元素呈现为“双粗体”，因此如果您不想加载更多字体文件[1]，则必须从元素中删除字体粗细以使其正常化。

为了提高渲染效果，尝试按如下方式加载字体[2][3]：

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('../fonts/roboto-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-bold-webfont.woff2') format('woff2'),
         url('../fonts/roboto-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-italic-webfont.woff2') format('woff2'),
         url('../fonts/roboto-italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

[1] 最好使用较少的字体但包含正确的字体

[2] 仅以 Roboto 为例，其余部分同样适用

[3] 考虑以绝对数字而不是相对值来定义值，因为不同的浏览器可能会以不同的方式解释这些值

【讨论】：

【解决方案3】：

我的问题的答案是具有不同的字体粗细，例如如果您有 google 字体，请确保您导入了 light(300)、regular (400)、medium (500)、bold (700) 版本。

【讨论】：