從 CDN 加載字體，在 Chrome 瀏覽器和 Safari iOS 模擬器上沒有問題，但在 iOS Safari 瀏覽器上沒有加載？

Question

有點讓我發瘋，不知道我做錯了什么。

所以我正在使用 NextJS 並將此字體加載到我的<Link />中。 它在 Chrome 和 Safari 上看起來不錯，在 iOS 模擬器上看起來很好，但是當我在我的個人設備上加載網站時沒有加載。

這是字體： 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;

全球.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

我並不聲稱完全理解這一點，但解決方法似乎是將定義字體系列的 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 沒有加載 fonts 如果它無法檢測到它們正在被使用（並且如果內容完全由 JS 創建，則它在加載時不會檢測到任何文本），但這並不能完全解釋為什么將直接在作品中聲明字體。

可能值得在鏈接上嘗試使用 rel="preload"，但至少上述解決方法似乎有所幫助。

更新：

事情似乎比上面的猜測還要簡單。

該鏈接使用 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 瀏覽器和 Safari iOS 模擬器上沒有問題，但在 iOS Safari 瀏覽器上沒有加載？

問題描述

1 個解決方案

解決方案1
1 已采納 2022-04-21 06:36:14

從 CDN 加載字體，在 Chrome 瀏覽器和 Safari iOS 模擬器上沒有問題，但在 iOS Safari 瀏覽器上沒有加載？

問題描述

1 個解決方案

解決方案1 1 已采納 2022-04-21 06:36:14

解決方案1
1 已采納 2022-04-21 06:36:14