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

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

调用方法:分为【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代码】里即可。

本站为个人博客,博客所发布的文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。访问和下载本站内容,说明您已同意上述条款。

版权:摘自https://ddg.ink/377.html

最后修改:2021 年 08 月 06 日 03 : 36 PM
如果觉得我的文章对你有用,请随意赞赏