html – 如果GoogleFont服务不可用,如何加载自托管字体文件?

我想使用Google Fonts目录中的字体集合.我选择了样式并在项目模板中包含CSS链接标记.

或者,使用谷歌字体,你也可以下载该集合,你得到的是一个包含所有字体样式的zip文件.

我可以创建一个与Google允许我包含在HTML中的CSS相当的CSS,因此如果访问者无法访问Google Font API,我想提供自托管字体文件作为后备.

如何设置此功能,并防止下载Google字体文件和自托管字体文件?如果用户可以访问Google字体,则浏览器不应下载该字体的自托管版本.

解决方法

你有3个选择:

>使用2套@ font-face at-rules,使用不同的字体系列名称(例如“Droid Sans”和“Droid Sans Local”),然后使用“Droid Sans”,“Droid Sans Local”等字体堆栈,Helvetica,Arial,sans-serif.但是,这将导致下载两种字体,从而增加加载时间.
>使用一组@ font-face at-rules,但使用2组src属性.如果浏览器决定下载指定的所有字体文件,这也可能会增加加载时间.
>像大多数CDN一样,通过DNS在网络层进行镜像.这需要网络设置,但您的CSS将保持不变,并且它对浏览器最透明,无需额外下载.

谷歌网络字体已经采用了第三种选择,所以如果你已经使用了CDN托管的来源,我个人不会打扰.但是,如果您使用来自不太可靠的来源的字体,那可能是值得的.但是,如果你要努力为你的字体设置它,为什么不为你的所有静态资源(图像,样式表,JS等)设置它?最合理的行动方案是获得免费或付费的CDN来托管您的所有静态资产.

相关文章

vue阻止冒泡事件 阻止点击事件的执行 <div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些