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

Question

我有一个带有两种字体的网络应用程序，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 中本地加载它们，那么强元素会在 iOS 9 上以不同的字体显示iPhone 4S 和 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, with CSS file at www.emotionathletes.org/strong.css 放了一个现场版。

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

Answer 1

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

对于 Open Sans 在 700，woff 文件路径是：

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

应该是：

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

较旧的浏览器使用 woff 而不是 woff2，因此他们完全按照他们被告知的那样做。我现在解决了这个问题。

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

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

Different font on strong elements for Internet Explorer 11 and Safari on iOS 9

html

css

fonts

internet-explorer

ios

最小的可重现示例