Handsome主题自定义博客字体(支持所有网站)

Handsome主题自定义博客字体(支持所有网站)

低调G
2021-03-28 / 6 评论 / 1,585 阅读 / 正在检测是否收录...

最近看很多博主都在更换自己博客的字体,低调G也追赶潮流,修改自己博客的字体。
本人一般不喜欢占用自己的资源,所以也在网络上引用字体,有幸看到有字库,里面字体资源非常多,就注册尝试调用了一下,效果还不错,所以就分享给大家。

注册和应用

首先去有字库注册个账号。
地址:https://www.webfont.com/

注册登陆后,点击上面的【字体列表】(里面的字体资源非常非常多)

选择自己喜欢的字体,点击右边的【立即使用】

调用方法:分为【CSS模式】和【JS模式】。
我选择的是全局调用,使用的【JS模式】代码,只要将代码放到网页的<head>标签之中即可。
JS模式还可以多套字体一起使用。
同一页面上要引用多套字体,只需要将那套字体页面中的应用语句[$youziku.load("xxxxx","xxxxxxxxxxxxxxxxxx","xxxxxxxxxx");]设置在当前应用语句列表之后(...的位置)即可。不需要重复引用第一步中的JS文件和[$youziku.draw();]语句。

代码注解

<script type="text/javascript" src="https://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js"></script>
<script type="text/javascript">
$webfont.load("seletor1", "xxx", "fontfamily");
//第一个参数"seletor1"请设置选择器代码(如:#id1、.class1、h1等),多个选择器,请用英文逗号隔开(如:#id1,.class1,h1)。
//第二个参数"xxx"请您设置要使用的字体的Accesskey。
//第三个参数"fontfamily"请设置字体的英文名,该参数主要是为了标记当前所用字体,方便检查、核对。
//第三个参数可支持英文内容使用不同的英文字体(其实是字体优先级);如:$webfont.load("seletor1", "xxx", "你自定义的英文字体fontfamily,有字库fontfamily");
$webfont.draw();
</script>

JS模式插件应用注解

异步内容

JS插件是在页面的onload事件中根据选择器所指定的标签去获取内容的,如果某块内容,是异步加载的(在onload事件之后加载),JS将无法有效获取到该部分内容,为此,JS插件再次开挂,支持异步文字:
1.更新原script标签src为:
<script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js#async"></script>
2.将原代码中的$webfont.draw(); 改为$webfont.draw(0);
3.在异步方法的最后一行(在加载内容的执行语句的下一行)添加如下语句:

1)常规调用
  `$webfont.submit(partName);`
2)异步分页场景调用
 `$webfont.submit(partName,PageIndex);`

参数partName是指当前异步内容块的名字(整个页面唯一即可,因为一个页面下可能会调用多个),由用户自定义(不能有中文字符),用于标记当前异步内容块。如果一张页面中,有多个异步内容块,则需要您添加多个$webfont.submit(),且同一页面上不能有相同partName参数。
参数PageIndex是可选参数,是指当前异步内容的分页页码。如果当前异步内容块是有分页的,则需要在调用$webfont.submit()语句的时候传进来当前页码。
注意:原代码中的$webfont.load()语句也需要做相应调整:如果$webfont.load()中的选择器(第一个参数)包含了异步标签(显示异步内容的标签),则需要将这个异步标签剔出来(将这个选择器改成能将这个异步标签排除在外的选择器写法),然后将这个异步标签单独写成一行$webfont.load()语句。
如:原$webfont.load()语句中的选择器是body,那么现在就需要将这个$webfont.load()语句拆分成两行,一行是不包含异步标签的其他所有标签,一行就只是那个异步标签。

PC端和手机端使用不同字体效果(同一个页面下)

<script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js"></script>
<script type="text/javascript">
$webfont.load("selector1", "xxx", "fontfamily").mobile("xxx","fontfamily");
//第一个参数"selector1"请设置选择器代码(如:#id1、.class1、h1等),多个选择器,请用英文逗号隔开(如:#id1,.class1,h1)。
//第二个参数"xxx"请您设置PC端要使用的字体的Accesskey。
//第三个参数"fontfamily"请设置字体的英文名,该参数主要是为了标记当前所用字体,方便检查、核对。
//第三个参数可支持英文内容使用不同的英文字体(其实是字体优先级);如:$webfont.load("seletor1", "xxx", "你自定义的英文字体fontfamily,有字库fontfamily");
//调用mobile()函数即手机端应用不同的字体,第一个参数"xxx"请您设置手机端要使用的字体的Accesskey,第二个参数"fontfamily"请设置字体的英文名,该参数主要是为了标记当前所用字体,方便检查、核对。手机端也支持英文内容使用不同的英文字体。
$webfont.draw();
</script>

带参数的URL

JS插件是通过当前页面的URL为key来存放页面相应的字体的,所以新的页面(新的URL)首次打开时,会有闪烁的现象,那是服务器在生成字体并将字体注册在当前新的URL(新的key)下;
如果URL带有参数,且参数每次打开或刷新都会变动,那么页面就会一直存在闪烁的现象,因为每次打开JS插件都认为是新页面;
如果参数的变动对于应用了在线字体的那部分内容没有影响(如微信分享时自动加的后缀),那么可以通知JS插件,让JS插件不去理会这些参数(也就是说,这些参数无论怎样变动,都不会被JS插件识别为新的URL),具体操作方法如下:
1,在JS地址后面添加一个英文问号(?)即可让JS插件不去理会当前URL所有的参数,也就是说,无论参数怎样变动,页面都不会再闪烁了。
<script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js?"></script>
2,在JS地址后面通过param参数来指示哪些参数需要保留,多个参数用“|”隔开(这些参数变动,会影响应用了在线字体的那部分内容),其他的参数忽略。
<script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js?param=page|proid"></script>
3,在JS地址后面通过noparam参数来指示哪些参数需要忽略,多个参数用“|”隔开(这些参数变动,不会影响应用了在线字体的那部分内容),其他的参数保留。
<script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js?noparam=page|proid"></script>

Handsome主题应用

代码应用以Handsome主题为例:
进入后台-主题外观-设置外观-开发者设置
将以上JS模式代码加入到【自定义输出head 头部的HTML代码】里即可。

0

评论 (6)

取消
  1. 头像
    47778171
    Windows 10 · Google Chrome

    我看好像是每一个月送100个金币,金币用没了好像直接就不能使用了,需要开套餐或者买金币 ::twemoji:sweat::

    回复
    1. 头像
      低调G 作者
      Android · UC Browser
      @ 47778171

      是的 果断放弃

      回复
  2. 头像
    beta
    Windows 10 · Google Chrome

    小白请问一下handsome主题需要添加的具体代码是怎么样的呀OωO

    回复
    1. 头像
      低调G 作者
      Windows 10 · FireFox
      @ beta

      直接复制第二个图片的JS代码,加入到【自定义输出head 头部的HTML代码】里即可。
      经测试这个字体需要消耗金币,不好玩。

      回复
  3. 头像
    王发财
    Windows 7 · Google Chrome

    赞一个, ::twemoji:smile:: 不错哦,又一个简单粗暴的字体修改方案

    回复
    1. 头像
      低调G 作者
      Android · UC Browser
      @ 王发财

      嗯 这个字体多一些。
      可以好好研究一下,我手机上网发的,有点费劲。

      回复