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明朝
これは秀英明朝



TypeSquareで部分的にフォント変更 TypeSquareで部分的にフォント変更 Reviewed by mugridge on 8/09/2014 Rating: 5

0 件のコメント:

Powered by Blogger.