时间戳

首页 > 解决方案 > iOS 9 上 Internet Explorer 11 和 Safari 的强元素上的不同字体

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

问题描述

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

在 Firefox 和大多数浏览器上显示

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

在 iOS 9 Safari 和 Internet Explorer 11 上显示

这些元素的相关 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 上使用不同字体的原因是什么？

最小的可重现示例

在评论之后，我将问题缩小到字体的加载。如果我将它们加载到head链接到 Google 字体的 HTML 中，则页面显示良好。@font-face如果我使用from a woffor文件在 CSS 中本地加载它们woff2，则强元素在 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上放了一个现场版本，在www.emotionathletes.org/strong.css上带有 CSS 文件。

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

标签： htmlcssiosinternet-explorerfonts

解决方案

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

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

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

并且应该是：

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

较旧的浏览器使用woffand not woff2，因此他们完全按照他们的指示行事。我现在解决了这个问题。

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

推荐阅读