2021年10月22日金曜日

FitText.js を使っていい感じに文字列を画面最大に表示する方法

FitText.js を使っていい感じに文字列を画面最大に表示する方法

概要

画面いっぱいに大きな文字を表示したい場合に便利です

環境

  • macOS 11.6
  • chrome
  • FitText.js 1.2.0

サンプルコード

index.html の作成だけで動作します

  • index.html
<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <style type="text/css">
    #counter {
      color: #40e0d0
    }
    .container {
      width: 100%;
      margin: 0 auto;
    }
    h1 {
      text-align: center;
    }
  </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1 id="msg">Count: <span id="counter">0</span></h1>
      </header>
    </div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.min.js" integrity="sha512-e2WVdoOGqKU97DHH6tYamn+eAwLDpyHKqPy4uSv0aGlwDXZKGwyS27sfiIUT8gpZ88/Lr4UZpbRt93QkGRgpug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    $("#msg").fitText(1.2);
  </script>
</html>

ポイント

JavaScript で再描画しているので body の最後で呼び出しましょう

fitText 関数の引数の数字はコンプレッサーで値を小さくすると文字が大きくなり値を大きくすると文字のサイズが小さくなります

動作確認

  • open index.html

で以下のように表示されます

参考サイト

0 件のコメント:

コメントを投稿