旧版Safari浏览器将一种粗体显示为另一种

问题描述

我的网站使用两种字体，一种是粗体字体，一种是类似手写的标题，另一种是无衬线的文本。 sans serif文本的一部分为粗体，并在具有移动设备大小的视口的桌面上正确显示：

在具有Safari的iPhone 4S上，文本中的粗体字体使用手写字体而不是Open Sans：

如果我删除按钮上的font-weight: 700;和文本上的粗体标签，iOS会正确显示。

我知道iOS有一些怪癖，例如rounding of boxes。

CSS的相关部分是：

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/amatic-sc-v13-latin-regular.woff2) format('woff2'),url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff'); }

@font-face {
  font-family: 'Amatic SC';
  font-style: bold;
  font-weight: 700;
  src: url(/fonts/amatic-sc-v13-latin-700.woff2) format('woff2'),url(/fonts/amatic-sc-v13-latin-700.woff) format('woff'); }

/*
Open Sans is a Google Font that goes well with Amatic SC

https://fonts.google.com/specimen/Open+Sans?sidebar.open=true&selection.family=Open+Sans#about
*/

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/open-sans-v17-latin-regular.woff2) format('woff2'),url(/fonts/open-sans-v17-latin-regular.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: bold;
  font-weight: 700;
  src: url(/fonts/open-sans-v17-latin-700.woff2) format('woff2'),url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff');
}

//...

body {
  font-family: 'Open Sans',sans-serif;
  // ...
}

// ...

h1,h2 {
  margin: 0.5rem 0 0.5rem 0;
  text-align: left;
  font-family: Amatic SC,cursive;
  font-weight: bold;
}

该网站位于emotionathletes.org。

如何在iOS上修复粗体字体？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）