我網站上的 Fonts 沒有出現在 iOS 上

Question

我在 Github 頁面上托管的我的網站具有 namecheap 域，不允許 iOS 用戶（尚未嘗試過 android）查看 Z980D14C0C85495B48B9A9134658E6121。 我已經在 iPhone 7 上的 iOS 14.3 上嘗試過這個，同時帶有 Safari 和 Chrome

我的 Windows 10 計算機上顯示的字體是 Calibri，但在 iOS 上顯示為 Times New Roman（默認）

我的網站是http://joswinjohn.me ，

html file is https://raw.githubusercontent.com/joswinjohn/joswinjohn.github.io/master/index.html

css file is https://raw.githubusercontent.com/joswinjohn/joswinjohn.github.io/master/css/style.css

回購是https://github.com/joswinjohn/joswinjohn.github.io如果你還需要什么

如果有什么我遺漏的，請告訴我！

Answer 1

您的 Windows 設備正在正確顯示您的“Calibri”字體，因為該字體已安裝在設備上。 要使用目標設備中未安裝的字體，您需要包含字體文件本身並在 CSS 文件中引用它：

@font-face {
  font-family: Calibri;
  src: url("Calibri.ttf") format("truetype"), url("Calibri.otf") format("opentype"), url("Calibri.woff") format("woff"), url("Calibri.woff2") format("woff2");
}

在src中，您可以使用 1 個或多個url() 。 如果您使用多個，瀏覽器將使用第一個匹配項，或者它支持的第一個匹配項。 確保url()中的內容與您的字體文件的路徑匹配。