ズンドコキヨシをフォントで

ズンドコキヨシをフォントで実現

とりあえず実働サンプルを見てください。

ソースを見てもらうとわかるとおり、 JSで加工するようなことは一切してません。

使い方

Webフォントとして使うWoffフォント zundokokiyoshi-Regular.woff をダウンロードします。

Webフォントの指定。

css

@font-face {
  font-family: 'zundoko';
  src: url('zundokokiyoshi-Regular.woff') format('woff');
  font-weight:400 ;
}

適用するところに当てるスタイル。

css

.zundoko {
    font-family:zundoko,sans-serif ;
    -webkit-font-feature-settings: "ccmp" 1 ;
    font-feature-settings: "ccmp" 1 ;
}

これで「ズンズンズンズンドコ」と書いた部分が、自動的に「キ・ヨ・シ! 」と表示されるようになります。

仕組み

Opentypeのフォントフィーチャーを利用しています。特定の文字の組み合わせを別の字体で表示する合字機能を使って、「ズンズンズンズンドコ」で特定の文字「キ・ヨ・シ! 」を表示する仕組みです。実は「キ・ヨ・シ! 」は一つの文字です。通常の文字はカタカナのグリフのみ持っています。

合字機能は、ブラウザによって自動的に動作しますが、 Chromeでは -webkit-font-feature-settings: "ccmp" 1 ;　の指定が必要になります。

作成環境

このような機能を持ったフォントを作ることのできるフォントエディタ、Glyphsで作成しました。

カナグリフのベースは、AdobeのSoureceHanSansJPフォントから、SIL Open Font Licenseに基づいて利用しています。