最近真的好忙

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

学习 墨染辉夜 2186℃ 0评论

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

一些废话

不想看的直接跳过。

为啥要镜像

众所周知,现阶段谷歌的大部分服务在境内都是无法使用的,即使有些可以使用的服务也难免会间歇性终止(如谷歌翻译、谷歌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,二者不同之处只在于文字和字体谁先加载。放在前者可以提高速度,但是会导致一开始的字体不加载,完全加载完毕后才会显示字体;后者会降低速度,但是字体会和文字一起加载。

  • 给你需要的文字添加字体样式,下面的“大功告成”样式表如下例:

  • 大功告成

云字体镜像用法

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

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

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

点击展开 查看更多

OSS如何配置

点击展开 查看更多

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

点击展开 查看更多

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

点击展开 查看更多

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

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

修改字体声明样式表

以第一段为例

我们需要镜像的是的字体文件 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,您需要填写昵称和邮箱!

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