TypeSquareで部分的にフォント変更

TypeSquareで部分的にフォントを変更する話とちょっとしたおまけ。


モリサワのTypeSquareのページでも手助けとして色々なCSSが配布されていますが、この記事では部分的に（それこそ一語・一文単位で）フォントを使い分ける方法を紹介します（技術としては初歩中の初歩ですが…）。サイト自体にTypeSquareの導入が済んでいることが前提です。




HTMLでフォントを変えたい部分、例えば


「これがリュウミンL-KLです。」


という文章があって、ここのフォントをリュウミンL-KOにするなら、HTMLでこの部分を探して、


<div style="font-family: 'Ryumin Light KL', serif;">これがリュウミンL-KLです。</div>


とします。すると、

これがリュウミンL-KLです。

というようにリュウミンL-KLになります。フォントファミリー名はモリサワのサイト

https://typesquare.com/fontlist/fontlist

で確認できます。（要ログイン）




サイズも変えたいときには


<div style="font-family: 'Ryumin Light KL', serif;font-size: 40px;">これがリュウミンL-KLです。</div>


こういう記述で、

これがリュウミンL-KLです。

となります。




ただ一文の中でころころ変えたいときには、上の記述だと</div>の後に改行が入ってしまうので、styleに


<div style="_display: inline; display: inline-block; font-family: 'Ryumin Medium KL', serif; font-size: 20px;">文章</div>


青字部分を追加してインライン要素にします。


<div style="_display: inline; display: inline-block; font-family: 'Ryumin Medium KL', serif; font-size: 20px;">リュウミン</div>
<div style="_display: inline; display: inline-block; font-family: 'A1 Mincho', serif; font-size: 20px;">A1明朝</div>
<div style="_display: inline; display: inline-block; font-family: 'Shuei Mincho M', serif; font-size: 20px;">秀英明朝</div>


こんな感じで

これはリュウミン

これはA1明朝

これは秀英明朝