Html 如何仅在字体不'；在当地不存在吗？

在我的网站上，我希望尽可能减少页面大小。因此，在苹果设备上，我想使用本机的

sanfrancisco

字体显示我的站点。在所有其他设备上，我想显示（极其相似的）

Roboto

font

Roboto最棒的地方是它在本地安装了Android。。。因此，如果字体已经存在，我不想安装它

我想做的是，在下面的伪代码中描述什么

if ("San Francisco" or "Roboto" not installed locally) {
// download Robot (and preload it for super fast performance)
<link rel="preload" as="font" href="/assets/fonts/roboto.woff2" type="font/woff2" crossorigin/>
}

上面的CSS代码的问题是，它速度慢并且不预加载

现在是的，我想我可以为所有页面视图预加载Roboto字体，但这似乎完全是浪费

---

关于如何做到这一点的想法？

一种方法是通过JS和API

您可以从尝试从FontFace实例加载本地“San Francisco”字体开始，如果失败，请加载Roboto回退。
但这样做，我们失去了链接预加载的一些优势，我们可能会面临一个未格式化内容的闪光

（异步（）=>{
const sanfrancisco=新方脸（“旧金山”，“本地”（“旧金山”））；
试一试{
等待sanfrancisco.load（）；
log（“'San Francisco'字体在此系统上可用”）；
document.fonts.add（旧金山）；
}
捕捉（错误）{
console.log（“'sanfrancisco'字体在此系统上不可用”）；
//使用本地版本
//或者，如果不可用，则返回到联机
const roboto=new FontFace（“roboto”），`local（roboto），
网址(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2)
` );
等待roboto.load（）；
log（“加载了Roboto字体”）；
document.font.add（roboto）；
}
document.body.classList.add（“字体加载”）；//避免FOUC
})();
正文：未加载（.font-loaded）{
不透明度：0；
}
.我的字体{
字体系列：“旧金山”，“机器人”；
}
以下段落
< P类=“我的字体”>使用旧金山或Roboto。< /P> < /代码>
body { font:normal 1em -apple-system,"Roboto",sans-serif;}