u-font-(face)
フォントを変更する。オブジェクト・コンポーネントを可能な限り上書きする。
(face)は、フォントファミリーを参照。
u-font-first:見出し用のフォントに変更しました
u-font-second:英数字用のフォントに変更しました
u-font-third:ディスプレイ用のフォントに変更しました
ここは見出し用のフォントですが、ここからbody要素のフォントに変更しました
u-font-mono:等幅フォントに変更しました <p class="u-font-mono">hello world!</p>
<p class="u-text-xl u-font-first">u-font-first:見出し用のフォントに変更しました</p> <p class="u-text-xl u-font-second">u-font-second:英数字用のフォントに変更しました</p> <p class="u-text-xl u-font-third">u-font-third:ディスプレイ用のフォントに変更しました</p> <p class="u-text-xl u-font-first">ここは見出し用のフォントですが、<span class="u-font-root">ここからbody要素のフォントに変更しました</span></p> <p class="u-text-xl u-font-mono">u-font-mono:等幅フォントに変更しました <p class="u-font-mono">hello world!</p></p>
u-font-bold
ボールドフォントに変更する。
補足:日本語ウェブフォントの仕様
多くの日本語ウェブフォントサービスでは、 font-weight
だけではウェイトの変更ができない。
このため、「フォントも含めて太字に変更するクラス」が必要となる。
参考: 太字指定が反映されません。 | FONTPLUS
https://webfont.fontplus.jp/faq/4125
Note: Web font in Japanese specification
When using the Japanese web font service, font weight is may not be change with only font-weight
. Therefore, "class to change to bold including font" is required.
Reference: Boldface designation is not reflected. | FONTPLUS
https://webfont.fontplus.jp/faq/4125
u-font-first_u-font-bold:見出し用のフォントに変更しました
u-font-second_u-font-bold:英数字用のフォントに変更しました
u-font-third_u-font-bold:ディスプレイ用のフォントに変更しました
ここは見出し用のフォントですが、ここからbody要素のフォントに変更しました
<p class="u-text-xl u-font-first u-font-bold">u-font-first_u-font-bold:見出し用のフォントに変更しました</p> <p class="u-text-xl u-font-second u-font-bold">u-font-second_u-font-bold:英数字用のフォントに変更しました</p> <p class="u-text-xl u-font-third u-font-bold">u-font-third_u-font-bold:ディスプレイ用のフォントに変更しました</p> <p class="u-text-xl u-font-first u-font-bold">ここは見出し用のフォントですが、<span class="u-font-root u-font-bold">ここからbody要素のフォントに変更しました</span></p>