[CSS]Webページでの文字表示を美しく豊かにするスタイルシート -Utility OpenType

「1/2, 1/4」「H2O」の分数や化学記号、文字と文字を合成して一つの文字にするリガチャ、にょろっと飾りがついたスワッシュやタイトル用字形など、英数記号文字の表示を美しく豊かにするスタイルをまとめたスタイルシートを紹介します。

デモのキャプチャ

Utility OpenType
Utility OpenType -GitHub

Utility OpenTypeは文字の表示を豊かにするスタイルを一つのファイルにまとめた、1.75KBのお手軽なスタイルシートです。

サイトのキャプチャ

Utility OpenType

使い方は簡単、外部CSSを記述して、文字にclassを加えるだけで利用できます。

Utility OpenTypeで表示できる文字をいくつか見てみましょう。
対応ブラウザはモダンブラウザで、IEは10+です。

デモのキャプチャ

リガチャ(合字)で表示

デモのキャプチャ

Small Capsで表示

デモのキャプチャ

スワッシュ字形で表示

スワッシュを利用する時は、スワッシュが含まれているWebフォントを使用します。

デモのキャプチャ

タイトル用字形で表示

デモのキャプチャ

数字や記号を揃えて表示

デモのキャプチャ

分数を表示

デモのキャプチャ

化学記号を表示

top of page

©2017 coliss