17975
フォントは一つの文字に一つの字形を割り当てていると思います。

Webフォントにおいても例えばMaterial
Iconsでは、「」(`&#xE0C6;`)という文字に[吹き出しの中にクエスチョンマークが入った字形](https://www.google.com/design/icons/#ic_live_help)が割り当てられています。

```

    <i class="material-icons">&#xE0C6;</i>
    
```

とする事で(class="material-icons" にMaterial Iconsフォントが設定されていれば)、この字形が表示されます。  
しかし、この字形は「live_help」という文字列にも割り当てられているらしく、

```

    <i class="material-icons">live_help</i>
    
```

とする事でもこの字形が表示されます。  
幅は一文字分で、完全に一文字のように見えます。

これはどういった仕組みなのでしょうか。

```

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet">
    
    <p>
      「&#xE0C6;」 &rarr; <i class="material-icons">&#xE0C6;</i>
    </p>
    
    <p>
      「live_help」&rarr; <i class="material-icons">live_help</i>
    </p>
```
CC BY-SA 3.0
2015-10-23T06:55:34.410
17974
2015-10-23T07:22:01.947
2015-10-23T07:02:53.193
3054
3054
question
html css font
Webフォントで複数文字の文字列が、一文字分の字形で表示される仕組み
[合字](https://ja.wikipedia.org/wiki/%E5%90%88%E5%AD%97)です。

live_helpという文字がアイコン1文字に見えるのは、live_helpの文字列の流れで1つの合字として表示させているからだと思います。  
CSS3で`-webkit-font-feature-settings`に`liga`を指定しているのは、合字の機能を有効にするためです。(参考:
[フォントの機能を使えるCSS3のFont feature settingsとは](http://www.riaxdnp.jp/?p=5094))  
試しに`-webkit-font-feature-settings`をCSSからコメントアウトするとアイコンが表示されないのが確認出来ると思います。

僕は詳しくないのでうまく説明できませんが、合字のフォントの作り方や仕組みについては以下のウェブサイトが参考になると思います。

参考: [【完全版】Ligature Symbols フォントセットの自作方法 -
くらげだらけ](http://kudakurage.hatenadiary.com/entry/20120720/1342749116)
CC BY-SA 3.0
2015-10-23T07:22:01.947
17975
2015-10-23T07:22:01.947
2599
17974
answer