textFit官方示例代码

代码语言:html

所属分类:布局界面

代码描述:textFit官方示例代码

代码标签: textFit 官方 示例 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
 
<head>
   
   
<link href='http://fonts.googleapis.com/css?family=Astloch' rel='stylesheet' type='text/css'>
   
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/textFit.min.js"></script>
   
<script>
     
function doFit(){
        textFit
(document.getElementById('container'), {maxFontSize: 120});
        textFit
(document.getElementById('horizCentered'), {alignHoriz: true});
        textFit
([
          document
.getElementById('multiLine'),
          document
.getElementById('letterSpacing'),
          document
.getElementById('lineHeight'),
          document
.getElementById('padding'),
          document
.getElementById('fontFaces'),
       
], {multiLine: true});
        textFit
(document.getElementById('vertCentered'), {alignVert: true, multiLine: true});
        textFit
(document.getElementById('centeredMultiLine'), {alignHoriz: true, alignVert: true});
        textFit
(document.getElementById('maxFontSize'), {maxFontSize: 40});
        textFit
(document.getElementById('paddingVert'), {alignVert: true, alignHoriz: true, alignVertWithFlexbox: true});
     
}
     
function waitForTextFit() {
       
var interval = setInterval(function() {
         
if (window.textFit) {
            clearInterval
(interval);
            doFit
();
         
}
       
}, 50);
     
}
      waitForTextFit
();
   
</script>

   
<style>
      body{
        background: #3F3F3F;
        color: #DCDCCC;
        font-family: Arial;
        font-size: 14px;
        margin-top: 30px;
      }
   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0