質問: フォントは一つの文字に一つの字形を割り当てていると思います。 Webフォントにおいても例えばMaterial Iconsでは、「」(``)という文字に吹き出しの中にクエスチョンマークが入った字形が割り当てられています。 ```  ``` とする事で(class="material-icons" にMaterial Iconsフォントが設定されていれば)、この字形が表示されます。 しかし、この字形は「live_help」という文字列にも割り当てられているらしく、 ``` live_help ``` とする事でもこの字形が表示されます。 幅は一文字分で、完全に一文字のように見えます。 これはどういった仕組みなのでしょうか。 ``` 「」 →  「live_help」→ live_help ```
回答: 合字です。 live_helpという文字がアイコン1文字に見えるのは、live_helpの文字列の流れで1つの合字として表示させているからだと思います。 CSS3で`-webkit-font-feature-settings`に`liga`を指定しているのは、合字の機能を有効にするためです。(参考: フォントの機能を使えるCSS3のFont feature settingsとは) 試しに`-webkit-font-feature-settings`をCSSからコメントアウトするとアイコンが表示されないのが確認出来ると思います。 僕は詳しくないのでうまく説明できませんが、合字のフォントの作り方や仕組みについては以下のウェブサイトが参考になると思います。 参考: 【完全版】Ligature Symbols フォントセットの自作方法 - くらげだらけ