textFit官方示例代码-html代码-BFW代码库

textFit官方示例代码

代码语言：html

代码描述：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;
      }
      *{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
      }
      .header{
        margin-left: 20px;
        display: block;
      }
      h1{
        border-bottom: 2px solid white;
        display: inline-block;
        margin: 0;
        color: white;
      }
      div{
        margin: 20px 0;
        height: 200px;
        width: 200px;
        overflow: hidden;
        font-size: 8px;
        float: left;
        margin: 20px;
        color: #ACC1AC;

        -webkit-box-shadow: 0px 2px 4px 2px rgba(255,255,255, 0.5);
        -moz-box-shadow: 0px 2px 4px 2px rgba(255,255,255, 0.5);
        box-shadow: 0px 2px 4px 2px rgba(255,255,255, 0.5);

        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;

        background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%.........完整代码请登录后点击上方下载按钮下载查看