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

Question

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

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

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

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

Answer 1

我建议只是自己托管他们.这是fontsprings的 "防弹"字体 - 面部语法.

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');
}

拥有所有这四个设置将确保它可以跨浏览器工作.只需确保所有四种类型的字体.Font Squirrel也有很棒的字体套件.

Answer 2

你有3个选择:

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

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