有字库使用

最新推荐文章于 2022-09-13 16:26:24 发布

輕描淡寫以後的以後

最新推荐文章于 2022-09-13 16:26:24 发布

阅读量2.2k

点赞数

分类专栏：前端开发教程

本文链接：https://blog.csdn.net/xu838209490/article/details/76583031

版权

前端开发教程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

有字库使用

“卢教”模式

调用方式：详细说明

第一步：JS调用 (本JS支持https,只需要将src属性中的http改为https即可)

将以下代码添加到您网页的：<head>标签之中

<script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>

第二步：设置标签

将以下代码添加到您网页的：</body>标签之前，紧挨着</body>

<script type="text/javascript">
    $youziku.load("body", "6048d1f90be3422e9700fa729eda9167", "winmantun23001");
    $youziku.load("#id1", "6048d1f90be3422e9700fa729eda9167", "winmantun23001");
    $youziku.draw();
</script>

第三步：设置白名单 (必须)

在项目发布到远程时，需要将远程域名，添加在有字库白名单中。白名单是为了保障用户的字体不被盗用，设置白名单后，远程网站就可以流畅应用有字库字体了，本地测试可不设置（已默认添加到白名单了）。

注意事项

第一个参数为选择器代码(有字库支持id选择器、class选择器、标签选择器，暂不支持除此之外的其它复杂选择器代码)，"id1"、"id2"代表要应用字体效果的标签id名字；"class1"、"class2"代表要应用字体效果的标签class名字；"h1"、"h2"代表要应用字体效果的标签名(非标签id名字)；粘贴后请自行替换为您页面上真实的选择器代码。允许设置多个选择器，用逗号隔开，且不可有空格；
第二个参数为字体的Accesskey，Accesskey包含字体及用户身份信息，字体的Accesskey相对于同一个用户是固定不变的；
第三个参数为字体的英文名字；
．．．是指此处可以设置多行应用语句，且每一行可以是不同的字体(只需将字体对应的$youziku.load语句复制进来即可)；
每次刷新内容都会变的标签，请勿设置有字库字体。

多套字体的应用

同一页面上要引用多套字体，只需要将那套字体页面中的应用语句[$youziku.load("xxxxx","xxxxxxxxxxxxxxxxxx","xxxxxxxxxx");]设置在当前应用语句列表之后(．．．的位置)即可。不需要重复引用第一步中的JS文件和[$youziku.draw();]语句