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

Webフォントにおいても例えばMaterial Iconsでは、「」()という文字に吹き出しの中にクエスチョンマークが入った字形が割り当てられています。

<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>