如何方便地将Google Fonts字体文件镜像到国内CDN

admin 348℃ 4评论

本文包含谷歌字体的简单介绍、常规使用方法、如何镜像到本地以及应用实例,同时也欢迎你们在下方的评论区里,提出一些奇奇怪怪的问题或者一些脑洞大开的想法,比如这种方法还能干什么,供大家分享交流经验。

一些废话

不想看的直接跳过。

为啥要镜像

众所周知,现阶段谷歌的大部分服务在境内都是无法使用的,即使有些可以使用的服务也难免会间歇性终止(如谷歌翻译、谷歌API)。所以我们网站要面向境内用户,必须得镜像到国内再使用。否则如果谷歌服务停止,而使用谷歌服务的链接又在head加载,会导致网站打开很慢很慢(这跟Html的内容加载顺序有关)。

谷歌字体是啥

谷歌字体是一个云字库平台,使用起来很方便,不需要进行格式的转换,直接在网页中引用。但是中文字体极少,好像只有5种(小声bb)。但跟其他云字库大抵差不多,都具有网页在线引用、无需下载、方便更改、兼容性好的优点。缺点自然也很明显:政策原因导致的网络不稳定。虽然谷歌在境内的上海和北京有服务器,但部分地区运营商对他们很不友好,经常会连不上。

博主这边连接情况较好 但有时也会断线

所以为了能让境内的小伙伴都能看到我网站Logo的字体,只要让它稳定就可以了,hhhhhhh

应该不是废话

这里是具体操作部分

云字体常规用法

  • 进入进入Google Web Fonts 主页:Google Fonts,并选择你喜欢的字体

点击展开 查看更多

  • 选择后复制外联字体样式表到需要的地方(本例中外联字体样式表是<link href=”https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe” rel=”stylesheet”>可以复制到footer.php 或header.php )

点击展开 查看更多

如果你是博客的每个页面都要字体,那就添加在footer.php或者header.php,二者不同之处只在于文字和字体谁先加载。放在前者可以提高速度,但是会导致一开始的字体不加载,完全加载完毕后才会显示字体;后者会降低速度,但是字体会和文字一起加载。

  • 给你需要的文字添加字体样式,下面的“大功告成”样式表如下例:
<li style="font-family: 'ZCOOL KuaiLe', cursive;font-size: 20px;">大功告成</li>
  • 大功告成

云字体镜像用法

我们打开云外联到谷歌的字体样式表就可以看到字体声明,我们发现字体文件都来自于fonts.gstatic.com这个网站,这就是谷歌的字体库,这只是样式表中的一小部分,手动搬工作量巨大,所以我们需要将它镜像到国内来。

/* [4] */
@font-face {
  font-family: 'ZCOOL KuaiLe';
  font-style: normal;
  font-weight: 400;
  src: local('ZCOOL KuaiLe Regular'), local('ZCOOLKuaiLe-Regular'), url(https://fonts.gstatic.com/s/zcoolkuaile/v1/tssqApdaRQokwFjFJjvM6h2Wo-Tpo2MpsrpYU3EJjXfOiTrBdUtGm0PGsPHkbHZzpr3G.4.woff2) format('woff2');
  unicode-range: U+ff8e, U+ff92, U+ff97-ff9b, U+ff9d-ff9f, U+ffe0-ffe4, U+ffe6, U+ffe9, U+ffeb, U+ffed, U+fffc-fffd, U+1f004, U+1f170-1f171, U+1f192-1f195, U+1f198-1f19a, U+1f1e6-1f1f5, U+1f1f7-1f1ff, U+1f21a, U+1f232, U+1f234-1f237, U+1f250-1f251, U+1f300, U+1f302-1f308, U+1f30a-1f311, U+1f315, U+1f319-1f320, U+1f324, U+1f327, U+1f32a, U+1f32c-1f32d, U+1f330-1f357, U+1f359-1f363;
}
/* [5] */
@font-face {
  font-family: 'ZCOOL KuaiLe';
  font-style: normal;
  font-weight: 400;
  src: local('ZCOOL KuaiLe Regular'), local('ZCOOLKuaiLe-Regular'), url(https://fonts.gstatic.com/s/zcoolkuaile/v1/tssqApdaRQokwFjFJjvM6h2Wo-Tpo2MpsrpYU3EJjXfOiTrBdUtGm0PGsPHkbHZzpr3G.5.woff2) format('woff2');
  unicode-range: U+fe55-fe57, U+fe59-fe66, U+fe68-fe6b, U+fe8e, U+fe92-fe93, U+feae, U+feb8, U+fecb-fecc, U+fee0, U+fee3, U+fef3, U+ff02-ff04, U+ff06-ff07, U+ff0a, U+ff10, U+ff12-ff19, U+ff1c-ff1e, U+ff20-ff5b, U+ff5d, U+ff61-ff65, U+ff67-ff6a, U+ff6c, U+ff6f-ff78, U+ff7a-ff7d, U+ff80-ff84, U+ff86, U+ff89-ff8d;
}
/* [6] */
@font-face {
  font-family: 'ZCOOL KuaiLe';
  font-style: normal;
  font-weight: 400;
  src: local('ZCOOL KuaiLe Regular'), local('ZCOOLKuaiLe-Regular'), url(https://fonts.gstatic.com/s/zcoolkuaile/v1/tssqApdaRQokwFjFJjvM6h2Wo-Tpo2MpsrpYU3EJjXfOiTrBdUtGm0PGsPHkbHZzpr3G.6.woff2) format('woff2');
  unicode-range: U+f011, U+f013-f015, U+f019, U+f020, U+f025, U+f02d, U+f02f, U+f034, U+f039-f03a, U+f03e, U+f044, U+f052, U+f057, U+f059, U+f05c, U+f067, U+f06c, U+f06e, U+f073, U+f075-f078, U+f07a, U+f07d, U+f07f, U+f087-f088, U+f08a, U+f095, U+f09e, U+f0a1, U+f0a7, U+f0b2, U+f0b7, U+f0c9, U+f0d8, U+f0da, U+f0dc-f0dd, U+f0e0, U+f0e6, U+f0eb, U+f0fc, U+f101, U+f104-f105, U+f107, U+f10b, U+f11b, U+f14b, U+f18a, U+f193, U+f1d6-f1d7, U+f244, U+f27a, U+f296, U+f2ae, U+f471, U+f4b3, U+f610-f611, U+f880-f881, U+f8ec, U+f8f5, U+f8ff, U+f901, U+f90a, U+f92c-f92d, U+f934, U+f937, U+f941, U+f965, U+f967, U+f969, U+f96b, U+f96f, U+f974, U+f978-f979, U+f97e, U+f981, U+f98a, U+f98e, U+f997, U+f99c, U+f9b2, U+f9b5, U+f9ba, U+f9be, U+f9ca, U+f9d0-f9d1, U+f9dd, U+f9e0-f9e1, U+f9e4, U+f9f7, U+fa00-fa01, U+fa08, U+fa0a, U+fa11, U+fb01-fb02, U+fdfc, U+fe0e-fe0f, U+fe30-fe31, U+fe33-fe44, U+fe49-fe52, U+fe54;
}

使用阿里云的OSS镜像回源功能

官方介绍看这里,原理如下图:

点击展开 查看更多

OSS如何配置

点击展开 查看更多

  • 到最下方点击设置镜像回源

点击展开 查看更多

  • 创建规则:回源地址框分别选择和填写https 和fonts.gstatic.com

点击展开 查看更多

至此OSS镜像部分配置完毕,此时OSS里还是空空如也,因为还没有404请求,所以OSS还未抓取fonts.gstatic.com的字体文件。

关于镜像站(OSS的域名),你可以在Bucket的域名管理里绑定自定义域名,也可以使用OSS概览里的阿里云Bucket 域名,也可以设置OSS为源站使用CDN域名加速

修改字体声明样式表

以第一段为例

@font-face {
  font-family: 'ZCOOL KuaiLe';
  font-style: normal;
  font-weight: 400;
  src: local('ZCOOL KuaiLe Regular'), local('ZCOOLKuaiLe-Regular'), url(https://fonts.gstatic.com/s/zcoolkuaile/v1/tssqApdaRQokwFjFJjvM6h2Wo-Tpo2MpsrpYU3EJjXfOiTrBdUtGm0PGsPHkbHZzpr3G.4.woff2) format('woff2');
  unicode-range: U+ff8e, U+ff92, U+ff97-ff9b, U+ff9d-ff9f, U+ffe0-ffe4, U+ffe6, U+ffe9, U+ffeb, U+ffed, U+fffc-fffd, U+1f004, U+1f170-1f171, U+1f192-1f195, U+1f198-1f19a, U+1f1e6-1f1f5, U+1f1f7-1f1ff, U+1f21a, U+1f232, U+1f234-1f237, U+1f250-1f251, U+1f300, U+1f302-1f308, U+1f30a-1f311, U+1f315, U+1f319-1f320, U+1f324, U+1f327, U+1f32a, U+1f32c-1f32d, U+1f330-1f357, U+1f359-1f363;
}

我们需要镜像的是的字体文件url() 括号里的部分,所以只需要将所有的fonts.gstatic.com 改成你镜像站的域名(OSS绑定的域名)然后保存即可。

代码中使用的是https,如果你的域名没有SSL证书(开启https),则需要整个将https://fonts.gstatic.com 替换成http开头的http://你的OSS镜像域名

点击展开 查看更多

可以用Sublime、记事本等Ctrl+H进行批量替换。本站实例中将fonts.gstatic.com替换成oss.mzyyun.com

保存的文件名没有特别要求,能用link标签加载到网站即可。保存之后的字体声明样式表也可以放在OSS里配合CDN加速再放到网站使用,也可以集合并主题文件style.css里,用于提高加载速度和效率。

测试回源结果

将上面替换好的字体声明样式表用link标签加载到网站中,如本站是<link href=”https://oss.mzyyun.com/css/ZCOOL%2BKuaiLe.css” rel=”stylesheet”>
然后按F12,随便找一段文字右键检查,单击element.style区域,添加字体样式,格式为font-family: ‘字体名称’;

字体名称在字体声明样式表中font-family: ‘ZCOOL KuaiLe’; 单引号里的部分,故本实例中字体名称为ZCOOL KuaiLe

点击展开 查看更多

添加完成后如果字体改变了,那么恭喜你大功告成,接下来你可以在你的样式表中直接添加字体属性font-family了,而此时在你的OSS里也会有从谷歌抓取的字体文件,同理适用于其他云字体库。

 

后记

如果在操作过程中有什么问题,欢迎在评论区提出,我将会选取一下具有普遍性的问题到本文的FAQ(常见问题)区并加以解答。

我的文章对您有帮助吗?
支付宝免费打赏
手机打赏 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址