相同 css 呈现不同的字体

Question

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

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

我是不同的形象。

没有 HTTP 404 任何资源，所有字体和资源都在正确下载。

我不确定我做错了什么，所以相同的 css 字体呈现不同？

Answer 1

正如@RobC 提到的，浏览器可能 faux-bold 因为 npm 的 Font 中存在特定的粗体定义，但 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

相同 css 呈现不同的字体

Same css is rendering different fonts

css

fonts

font-family

npm