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

前端之家收集整理的这篇文章主要介绍了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来托管您的所有静态资产.

猜你在找的HTML相关文章