ども、最近の注目ごとはWebARとLottie.js、Creative-DivエンジニアのShibuyaです。
今回はデザイナーさんにも知ってほしい、CSSでできるテキスト周りの装飾について、書いていこうと思います。
CSSその1：まずは基本のフォント設定
これはご存知の方も多いと思います。
Webサイトを表示したユーザーのPCにインストールされているフォントだけでなく、サーバー上にアップロードされたフォントを指定することができるCSSです。
自分でサーバー上にアップロードしたフォントを使用する場合、下記のような感じで@font-faceを指定し、font-familyで適用します。
See the Pen XWWJZGP by Yukari Shibuya (@YS_FE) on CodePen.
Webフォントとして使用できるフォントは、GoogleフォントやWebFontSearchなどから探すことができます。
WebFontSearchは、私が業務改善の一環で制作した、Webフォント検索サービスです。
日本語フォントが多く、検索・試し打ち・ライセンスの確認もできますので、ぜひ使ってみてください(宣伝)
CSSその2：文字詰をCSSで
letter-spacingは、文字と文字の間の隙間を指定できます。
マイナスの値も指定できるので、文字間を狭めることもできます。
font-feature-settingsは、プロポーショナルメトリクスを有効にできる機能で、plat(役物も文字詰)やpkna(役物は等幅)などの設定ができます。
プロポーショナルメトリクスはOpenTypeフォントの機能なので、使用するフォントによっては機能しないことがあるので注意が必要です。
See the Pen PoowRwb by Yukari Shibuya (@YS_FE) on CodePen.
CSSその3：文字の縁取り
text-strokeは縁取り線の太さと色を指定するだけで、簡単に袋文字ができちゃいます。
ただし、IE11は対応していないため、下記のようにIE11はtext-shadowで再現するなどの対応が必要になります。
See the Pen LYYEdzV by Yukari Shibuya (@YS_FE) on CodePen.
CSSその4：テキストで背景画像を切り抜き
画像をテキストの形に切り抜いたような効果を得たい場合は、background-clipとtext-fill-colorを使用します。
backgroundで切り抜きたい画像を指定し、background-clipで切り取り、text-fill-colorで文字色を透明にしています。
background-clip自体はほとんどのブラウザで対応しているのですが、テキストでの切り取りはIE11に対応していないので、ご注意を！
See the Pen vYYERzx by Yukari Shibuya (@YS_FE) on CodePen.
まとめ
今回はテキスト周りのCSSを取り上げましたが、いかがだったでしょうか？
CSSにはテキスト装飾以外にも、たくさんの機能が存在しますので、ぜひデザインの参考にしてくださいね。
それでは。