[CSS]Webページでの文字表示を美しく豊かにするスタイルシート -Utility OpenType
Post on:2015年12月15日
sponsors
「1/2, 1/4」「H2O」の分数や化学記号、文字と文字を合成して一つの文字にするリガチャ、にょろっと飾りがついたスワッシュやタイトル用字形など、英数記号文字の表示を美しく豊かにするスタイルをまとめたスタイルシートを紹介します。
Utility OpenType
Utility OpenType -GitHub
Utility OpenTypeは文字の表示を豊かにするスタイルを一つのファイルにまとめた、1.75KBのお手軽なスタイルシートです。
使い方は簡単、外部CSSを記述して、文字にclassを加えるだけで利用できます。
|
1 2 3 4 |
<head> ... <link href="http://utility-opentype.kennethormandy.com/css/index.css" rel="stylesheet"> </head> |
Utility OpenTypeで表示できる文字をいくつか見てみましょう。
対応ブラウザはモダンブラウザで、IEは10+です。
リガチャ（合字）で表示
Small Capsで表示
スワッシュ字形で表示
スワッシュを利用する時は、スワッシュが含まれているWebフォントを使用します。
|
1 2 3 4 5 6 7 8 9 |
@charset "UTF-8"; @font-face { font-family: "lt-lavanderia"; font-weight: 400; font-stretch: normal; src: url("/fonts/lavanderia-n4.woff2") format("woff2"), url("/fonts/lavanderia-n4.woff") format("woff"); } |
タイトル用字形で表示
数字や記号を揃えて表示
分数を表示
化学記号を表示
sponsors
