Next主题中从服务器加载Google字体

 

概述

想要在Hexo的Next主题中使用Google字体,一个问题在于这个字体的加载并不是很方便(与Next主题本身无关)。

解决的方法可以是修改主题,在没有合适CDN的情况下,从服务器直接加载对应字体也是一种选择。

实现

准备字体

首先,通过Chrome开发者工具,会发现难以加载的是这一css文件以及相关联的字体:

当前使用的Next主题使用的是Lato这一个字体,那么应该如何得到这一字体呢?

这时候就需要Google WebFont Downloader了。

如果有Node环境,那么直接执行:

即可。

使用上,可以通过-h查看参数定义:

通过上面的url,可以确定使用的的字体为Lato,那么下载相同的字体需要指定的参数为:

这里-a参数保证下载了所有字体。

如果可以顺利的访问对应的资源,那么成功之后将会在当前目录出现字体名为名字的css以及字体目录。

修改主题

对应的域名是googleapis,可以考虑在Next主题的vendors目录下新增一个同名的目录,将css以及字体组织。目录层级会变为:

剩下的工作是,在加载原先的css的partials中将url改成加载verdors中对应的地址即可:

当然,如果不想这么麻烦,直接在主题设置中关闭Lato字体即可。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">