有字庫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();
            }

 

還需要要使用中對再摸索，歡迎交流！網上也沒有更多的資料分享！