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