相同的 css 呈现不同的字体答案

【问题标题】：Same css is rendering different fonts相同的 css 呈现不同的字体
【发布时间】：2018-08-03 11:26:57
【问题描述】：

我使用的是来自http://fonts.googleapis.com/css?family=Open+Sans 的Open Sansfont。由于安全原因，一些客户端使用封闭环境，所以我需要使用从 npm 安装的本地字体。

我已经为Open Sans 尝试了来自 npm 的多个包，例如 "open-sans-all": "^0.1.3"、"typeface-open-sans": "^0.0.54"，但是具有相同 css 的字体与之前使用来自 GoogleApis 的字体呈现不同，尤其是在应用 font-weight: bold; 时。

我是不同的图像。

任何资源都没有HTTP 404，所有字体和资源都可以正常下载。

我不确定我做错了什么，因此具有相同 css 的相同字体呈现不同的效果？

【问题讨论】：

一个版本可能被浏览器渲染为仿粗体（即它被人为地渲染为粗体，因为该字体的实际粗体版本不存在）。另一个版本可能使用实际存在的粗体字体呈现。提供的 fonts.googleapis url 不包含字体的实际粗体版本，但 npm 的 (open-sans-all) 包含。由于您尚未提供MCVE，因此我认为您的问题可以接受猜测答案（如果有的话）。或许将 @fontface 规则和 CSS 规则集添加到您的 OP 中。可能有助于获得答案。
@RobC 你是对的，它可能是浏览器的假粗体，因为在 npm 的字体中存在特定的粗体定义，但在 GoogleApi 中没有。它很蹩脚，但客户更喜欢旧的，即来自浏览器的仿制品，因此需要下载相同的 woff2 文件并在本地引用，但再次需要为 IE 添加额外的 EOT 文件，因为 IE 无法识别 woff 并且 chrome 无法识别 EOT
感谢普拉纳夫的反馈。 "...client prefer old one" 听起来我很熟悉。我也和客户有过类似的情况。我现在通常选择一个字体系列，它具有所有浏览器都支持的各种粗细/样式（粗体、半粗体、斜体等）。我在@font-face 规则中声明它们，并在每个规则集中明确引用它们，即.quux { font-family: 'SomeFontBold'} 而不是.quux { font-family: 'SomeFont'; font-weight: bold;}。我尽量避免使用声明 font-weight: bold; 和 font-style: italic; 以避免可能的虚假渲染。
这是一个很好的推荐，我以后会尝试的

标签： css npm fonts font-family

【解决方案1】：

正如@RobC 提到的，它可能是浏览器的假粗体，因为在 npm 的字体中存在特定的粗体定义，但在 GoogleApi 中没有。

它很蹩脚，但客户更喜欢旧的，即来自浏览器的仿制品，因此需要下载相同的 woff2 文件并在从网站下载后在本地引用：

打开http://fonts.googleapis.com/css?family=Open+Sans

它有不同的字体，例如：

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(http://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} ...

将url中提到的所有文件下载为本地资源，如下所示：

http://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWJ0bbck.woff2

修改原始 css 以使用本地资源，例如：

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans Regular'), local('OpenSans-Regular'), url(ui/fonts/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

但再次需要为 InternetExplorer 添加额外的 EOT 文件，因为 IE 无法识别 woff2 并且 chrome 无法识别 EOT

【讨论】：