从 CDN 加载字体，在 Chrome 浏览器和 iOS 模拟器的 Safari 上没问题，但在 iOS Safari 浏览器上没有加载？

Question

有点快把我逼疯了，不知道自己做错了什么。

所以我正在使用 NextJS 并将此字体加载到我的 <Link /> 中。它在 Chrome 和 iOS 模拟器的 Safari 上看起来不错，但当我在我的个人设备上加载网站时却无法加载。

这是字体：https://www.cdnfonts.com/gagalin.font

_document.tsx

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link href='http://fonts.cdnfonts.com/css/gagalin' rel='stylesheet' />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

global.css

html,
body {
  font-family: 'Gagalin', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  margin: 0;
  padding: 0;
  background-color: black;
}

Answer 1

我并不声称完全理解这一点，但解决方法似乎是将定义 font-family 的 CSS 直接放入 HTML 头部的样式表中.

const div = document.createElement('div');
div.innerHTML = 'some text added by JS';
document.body.append(div);

@font-face {
  font-family: 'Gagalin';
  font-style: normal;
  font-weight: 400;
  src: local('Gagalin'), url('https://fonts.cdnfonts.com/s/57473/Gagalin-Regular.woff') format('woff');
}

html,
body {
  font-family: 'Gagalin', monospace;
}

IOS 如果它无法检测到字体正在被使用（并且如果内容完全由 JS 创建，则它在加载时不会检测到任何文本）但不会加载字体这并不能完全解释为什么将 font-face 声明直接放在作品中。

可能值得在 link 上尝试使用 rel="preload"，但至少上述解决方法似乎有所帮助。

更新：

看来事情比上面的猜测还要简单

link 使用 http 调用样式表。更改为 https，一切正常：

const div = document.createElement('div');
div.innerHTML = 'some text added by JS';
document.body.append(div);

html,
body {
  font-family: 'Gagalin', monospace;
}

<link href='https://fonts.cdnfonts.com/css/gagalin' rel="stylesheet" />

从 CDN 加载字体，在 Chrome 浏览器和 iOS 模拟器的 Safari 上没问题，但在 iOS Safari 浏览器上没有加载？

Loading a font from a CDN and it's fine on Chrome Browser and Safari for iOS Simulator but not loading on iOS Safari browser?

html

javascript

css

next.js