この記事の概要
テキストをパスや画像にせず、テキスト情報を保ったままアニメーションをつけたいと思う場面があり、 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: 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トークでお話してくださる方も募集中です！