iOS 9 上 Internet Explorer 11 和 Safari 的强元素上的不同字体答案

【问题标题】：Different font on strong elements for Internet Explorer 11 and Safari on iOS 9iOS 9 上 Internet Explorer 11 和 Safari 的强元素上的不同字体
【发布时间】：2021-05-25 20:54:04
【问题描述】：

我有一个带有两种字体的 Web 应用程序，Amatic SC 用于 h1 和 h2，Open Sans 用于其余字体。该网页在大多数浏览器上都可以正常显示strong 文字：

对于 iOS 9 上的 Safari（在 iPhone 4S 上测试）和 Windows 8.1 上的 Internet Explorer 11（在 LambdaTest 上测试），strong 元素使用来自 h1 和 h2 元素的字体：

这些元素的相关 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'); }

@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;
}

如果您想进一步检查，该网站位于www.emotionathletes.org。

iOS Safari 和 Internet Explorer 使用不同字体的原因是什么？

最小的可重现示例

在评论之后，我将问题缩小到字体的加载。如果我将它们加载到 HTML 的 head 中，链接到 Google 字体，则页面显示良好。如果我使用 woff 或 woff2 文件中的 @font-face 在 CSS 中本地加载它们，那么强元素在 iPhone 4S 上的 iOS 9 和 Windows 8.1 上的 Internet Explorer 11 上以不同的字体显示。在 CSS 中加载字体的顺序不会改变结果。

一个最小的可重现示例有 HTML 文件 strong.html:

<!DOCTYPE html>
<html><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="strong.css">
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
  </head>
  <body>
    <h2>Summary</h2>
    <p>The Bulgy series, whose first season is "Emotion Athletes", has the following purposes:</p>
    <ul>
      <li>
        transform the <strong>difficulties</strong> of the <strong>pandemic</strong> into   <strong>opportunities</strong> for children to <strong>recognise what they are feeling,   understand the reason, and use their emotions</strong>;
      </li>
    </ul>
  </body>
</html>

和CSS文件strong.css：

/*
Amatic SC and Open Sans are Google Fonts:

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

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

*/


/* comment these @font-faces for the page to work properly. */

@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'); }

@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 {
  font-family: 'Amatic SC', cursive;
}

我在www.emotionathletes.org/strong.html 放了一个实时版本，CSS 文件在www.emotionathletes.org/strong.css。

出于我自己的原因，我更喜欢从我的服务器提供字体文件，而不是从 Google 字体查询它们。如何在本地提供字体文件并在 Safari 和 Internet Explorer 上正常显示？

【问题讨论】：

Open Sans 字体似乎影响了 IE 中的<strong> 样式：i.stack.imgur.com/kIPaj.gif。我也比较了IE和Chrome中的样式，发现font-weight继承了IE中的400，但在Chrome中是bold：i.stack.imgur.com/rDESG.png。我认为font-weight: 400 覆盖font-weight: bold 和导致IE 问题的Open Sans 字体。但是当我下载网站的源文件进行调试时，它在IE中显示良好。如果您能提供 一个可以重现问题的最小代码 sn-p 会更好。
@YuZhou 感谢您的调查。这确实很奇怪。我用文本中和在线的最小可重复示例更新了问题。
@YuZhou 感谢您在调试过程中提供的帮助。问题只是 WOFF 字体文件的 URL 中的拼写错误。我现在已经修复了它，并且很高兴关闭、删除或移动这个问题，因为它与编程无关。

标签： html css ios internet-explorer fonts

【解决方案1】：

问题出在代码中，我今天在更改主字体时发现了该代码：

对于700 处的Open Sans，woff 文件路径为：

/fonts/amatic-sc-v13-latin-regular.woff

应该是：

/fonts/open-sans-v17-latin-700.woff

较旧的浏览器使用woff 而不是woff2，所以他们完全按照他们的指示行事。我现在解决了这个问题。

故事的寓意：如果使用本地字体来提高性能，请确保正确地将 CSS 连接到文件路径。

【讨论】：