有字库API方法使用一二

Posted 2020-09-27 礼拜16

有字库是全球第一中文web font（在线字体）服务平台，官网写的有点牛X

需要注册帐号才可以使用，免费字体有限制，一页字数不可以超过500 个，超过500个字体就不会为标签添加字体样式，比较坑爹！

我在尝试使用两种方法之后，把一些心得拿来分享

• 只能加载一种字体

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!--只有一种字体，需要加载这个js-->
<script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.client.min.js"></script>

            $(function(){
                onlyOneFont();
            });
            
            //只返回一种字体
            function onlyOneFont(){
                var getUrl = ‘http://service.youziku.com/webFont/getFontFace‘;
                var entity = {
                    url:getUrl,
                    AccessKey:‘69c8434454f842f28b46712f1b080c4a‘, //这个Key，可以根据不同的key返回不同的字体名称,但是在使用到页面上时，只显示 ‘思源简体’一种效果，不知道哪里的问题
                    Content:‘测试5555‘,
                    Tag:‘.only-font‘
                };
                
                $youzikuClient.getFontFace(entity,function(data){
                    console.log(‘获取到的字体为：‘ + data.FontFamily);
                    
                    var fontFamily = data.FontFamily;
                    $(‘.only-font‘).css({
                        ‘font-family‘:fontFamily,
                        ‘font-size‘:‘24‘,
                        ‘color‘:‘#555‘,
                        ‘margin-top‘:‘50px‘,
                        ‘margin-left‘:‘100px‘
                    });
                })
            }

• 卢教模式（可以同时为不同的标签设置字体）

//需要加载两个js文件
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!--卢教模式-->
<script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
<script type="text/javascript" src="https://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.lib.min.js"></script>

 

            //可以同时设置多个字体
            function luJiaoMode(){
                $youziku.load(".test", "69c8434454f842f28b46712f1b080c4a", "winmantun23001");
                $youziku.load(".text2","13e841f53229490490392b9a9c90ea6e", "hdjxyt");
                $youziku.draw();
            }

 

还需要要使用中对再摸索，欢迎交流！网上也没有更多的资料分享！