有字库API方法使用一二

有字库是全球第一中文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();
            }

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

原文地址:https://www.cnblogs.com/baiyygynui/p/7141393.html