LoginSignup
4
1

More than 1 year has passed since last update.

この記事の概要

テキストをパスや画像にせず、テキスト情報を保ったままアニメーションをつけたいと思う場面があり、 font-variation-settings を使ったら上手くいきました。

備忘録がてら記事にします。

完成品

See the Pen Untitled by Keisuke Watanuki (@xrxoxcxox) on CodePen.

仕組み

Variable fonts には font-family ごとに可変の軸が定められています。
一番ポピュラーなのは weight だと思いますが、それ以外にも optical size や ascender や descender の値など、フォントによって色々と用意されています。

これらの軸を CSS の font-variation-settings というプロパティで制御することができます。

font-variation-settings の構文
font-variation-settings: normal; /* デフォルト */
font-variation-settings: "wght" 700; /* "axes 名" 数値 */
font-variation-settings: "wght" 700, "opsz" 144; /* カンマ区切りで複数指定可能 */

あとは通常の CSS animation と同様に keyframe を定義して指定するだけです。

現実的な使い方

Google fonts には variable fonts 一覧のページがあり、それぞれのフォントで変更できる axes やその step が一覧になっています。
どのフォントにどの axes があって、どの範囲で変化させられるかを調べるのはそれなりに時間がかかるので、このページを見ながらだとフォントを選びやすいと思います。

今回は axes が多い Fraunces というフォントを選びました。

注意として、min が 0、max が 1、step が 1 のような axes はアニメーションさせられません。
例えば ital はイタリック体であるかそうでないかの boolean なので、徐々に傾き度合いを変えられません。1

Google fonts ではフォントの詳細ページから link のコードを取得できます。

こちらの内容を以下のように書き換えます。

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Fraunces&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,100..900,0..100&display=swap" rel="stylesheet">

今回はアニメーション可能な axes が opsz, wght, SOFT の 3 つだったので、それらを対象にコードを変えています。
フォントによっても axes や、その値・レンジが変わることに注意してください。

最後に

パスのアニメーションとか、そもそも動画を埋め込むとかした方が自由度は高いのは間違いないです。
ただ、アクセシビリティが低くなったり2、編集が大変になったり、デメリットもあります。

実現したいアニメーションがそこまで複雑ではない場合、こういった方法も検討して良いかもしれません。3


最後まで読んでくださってありがとうございます!
Twitterでも情報を発信しているので、良かったらフォローお願いします!

Devトークでお話してくださる方も募集中です!

  1. もしかしたら step が細かく定義されているフォントもあるかもしれませんが、ざっと見た限り見つけられなかったのでこういった記載をしています。

  2. あくまで「意識的に対応しないと低くなる」という意味です。代替テキストや aria-labelledby などをちゃんと付与すれば問題ありません。

  3. ただし可変するフォントなので、通常のフォントの数ウェイト分の容量があります。使わない axes は指定しないとか、unicode-range を指定するとか、スピードを落とさないための考慮が別途必要になるとも言えます。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1