iOS 上没有显示我网站上的字体

Question

我在 Github 页面上托管的带有 namecheap 域的网站不允许 iOS 用户（未尝试 android）查看字体。我已经在 iOS 14.3 和 iPhone 7 上用 Safari 和 Chrome

试过了

我的 Windows 10 电脑上显示的字体是 Calibri，但在 iOS 上它显示为 Times New Roman（默认）

我的网站是 http://joswinjohn.me,

html 文件是 https://raw.githubusercontent.com/joswinjohn/joswinjohn.github.io/master/index.html

css 文件是 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() 中的内容与您的字体文件的路径匹配。

iOS 上没有显示我网站上的字体

Fonts from my website don't show up on iOS

html

css

github

ios

github-pages