CSSans Pro - CSS製のフォント
最近はWebFontが流行っており、Web上で格好良いテキスト表現ができるようになっています。しかしWebFontの弱点としては、基本的に単色のみということです(合字で可能にする方法もあるようですが)。それでは表現力が片手落ちでしょう。 そこで参考にしたいのがCSSans Proです。CSSで作られたフォントになります。
CSSans Proの使い方
例えば以下のように使います。csssansがプリフィックスになっています。
<div class="cssans cssans--center">
<div class="cssans__accessible">CSSans Pro</div>
<div class="cssans__word">
<b class="cssans:C"></b>
<b class="cssans:S"></b>
<b class="cssans:S"></b>
<b class="cssans:a"></b>
<b class="cssans:n"></b>
<b class="cssans:s"></b>
</div>
<div class="cssans__word">
<b class="cssans:P"></b>
<b class="cssans:r"></b>
<b class="cssans:o"></b>
</div>
</div>
こんな感じでカラフルなフォントになります。
カラーテーマを編集すれば色が変わります。
文字の大きさも変更可能です。
タイポグラフィです。大文字と小文字。
数字とシンボル。
斜体も可能です。
CSSで作られているので、WebFontに比べて軽量なのは間違いありません。作成するのは非常に手間がかかりそうですが、フォント作成とはまた違った面白さがありそうです。なお、日本語で同様のことをやるのは非常に大変でしょう。
CSSans ProはCSS/JavaScript製のオープンソース・ソフトウェア(MIT License)です。
CSSans Pro - The Colourful, Sassy, CSS Font ZeroSpree/CSSans.Pro: CSSans Pro - The Colourful, Sassy, CSS Font