ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近は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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2