我网站上的字体未显示在 iOS 上

Question

我的网站，我托管在Github页面与namecheap域名，不允许iOS用户(没有尝试android)看到字体。我在iPhone 7的iOS 14.3和Safari浏览器上都试过这个

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