標準のフォント
世界でも類を見ない文字種（ひらがな・カタカナ・漢字・全角英数・半角英数）を使用する日本語圏では、商業ウェブサイトでのフォントファミリーの指定が、非常に精細になっています。
echo.cssでは、要素の役割に応じて、最大で4種類のフォントを使用することができます。
標準の、CSS・Sass内のフォント名称とフォントの対応は以下の通りです。
フォントは _scss/_config_basic.scss で変更することができます。
| フォント名称 | 役割 | 使用されているモジュール |
|---|---|---|
| 適用されるフォント | ||
| root | body要素に指定する、ウェブサイト内のベースフォント。 | .u-font-root |
| 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '-apple-system', 'BlinkMacSystemFont', 'Meiryo', sans-serif | ||
| first | コンポーネントの小見出し等に指定する、汎用の見出し用フォント。 | .c-card-title .c-media-title .u-font-first .wysiwyg > h1,h2 |
| rootと同じフォント | ||
| second | 日付や英文を表示する箇所に指定する、英字用フォント。 | .u-font-second .p-footer-copyright |
| 'Helvetica', 'Roboto', '-apple-system', 'Open Sans', 'Arial', sans-serif | ||
| third | 特別な見出し等に指定する、デザインフォント。 echo.cssのサンプルサイトでは object > utility のみ使用しており object > module, component, project には組み込んでいない。 |
.u-font-third |
| '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho', 'Bookman Old Style', 'Times New Roman', '-apple-system', 'BlinkMacSystemFont', serif | ||
| mono | ソースコード等に使用される、等幅フォント。 echo.cssのサンプルサイトでは object > utility のみ使用しており object > module, component, project には組み込んでいない。 |
.u-font-mono |
| 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace | ||
日本語ウェブフォントサービスにおける、font-weight問題について
著名な日本語ウェブフォントサービスでは、CSSプロパティの font-weight だけでは、文字の太さを変更できない問題があります。
特定ブラウザでの不具合の回避、見た目の問題など、サービスごとに理由は異なり、今のところ解消される様子はありません。
echo.cssでは、これらのサービスを使用したときに不都合が出ないよう、SCSSファイルに以下の対策をしています。
- フォント関連の変数を、normalとboldの二種類に分けて指定する
- 文字の太さが変更されるクラスのスタイル指定では、
font-familyを併記する
フォントを変更する
Sassを使用する場合は、echo.cssのフォントを変更することができます。
プロジェクト内の _scss/_config_basic.scss の変数 $font-family-*** を変更したうえでビルドしてください。
下記の例では third のフォントが「筑紫ゴシックPrとBetween Pro2の混植」となります。
// third: display
$font-family-third: 'TsukuGoPr5-R-Between2-Light', '-apple-system', 'BlinkMacSystemFont', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif !default;
$font-weight-third: 300 !default;
$font-family-bold-third: 'TsukuGoPro-B-Between2-Medium', '-apple-system', 'BlinkMacSystemFont', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif !default;
$font-weight-bold-third: 700 !default;