搜索到
1
篇与
字体引用
的结果
-
Handsome主题自定义博客字体(支持所有网站) 最近看很多博主都在更换自己博客的字体，低调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>带参数的URLJS插件是通过当前页面的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代码】里即可。
