標準のフォント
世界でも類を見ない文字種(ひらがな・カタカナ・漢字・全角英数・半角英数)を使用する日本語圏では、商業ウェブサイトでのフォントファミリーの指定が、非常に精細になっています。
echo.cssでは、要素の役割に応じて、最大で4種類のフォントを使用することができます。
標準の、CSS・Sass内のフォント名称とフォントの対応は以下の通りです。
フォントは _scss/_config_basic.scss
で変更することができます。
フォント名称 | 役割 | 使用されているモジュール |
---|---|---|
適用されるフォント | ||
root | body要素に指定する、ウェブサイト内のベースフォント。 | .echo-font-root |
'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '-apple-system', 'BlinkMacSystemFont', 'Meiryo', sans-serif | ||
first | 汎用の見出し用フォント。 | .echo-title .echo-font-first |
rootと同じフォント | ||
second | 日付や英文を表示する箇所に指定する、英字用フォント。 echo.cssでは object > utility のみ使用している。 |
.echo-font-second |
'Helvetica', 'Roboto', '-apple-system', 'Open Sans', 'Arial', sans-serif | ||
third | 特別な見出し等に指定する、デザインフォント。 echo.cssでは object > utility のみ使用している。 |
.echo-font-third |
'游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'Hiragino Mincho Pro', 'MS P明朝', 'MS PMincho', 'Bookman Old Style', 'Times New Roman', '-apple-system', 'BlinkMacSystemFont', serif |
日本語ウェブフォントサービスにおける、font-weight問題について
著名な日本語ウェブフォントサービスでは、CSSプロパティの font-weight
だけでは、文字の太さを変更できない問題があります。
特定ブラウザでの不具合の回避、見た目の問題など、サービスごとに理由は異なり、今のところ解消される様子はありません。
echo.cssでは、これらのサービスを使用したときに不都合が出ないよう、SCSSファイルに以下の対策をしています。
- フォント関連の変数を、normalとboldの二種類に分けて指定する
- 文字の太さが変更されるクラスのスタイル指定では、
font-family
を併記する
フォントを変更する
Sassを使用する場合
プロジェクト内の _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;
なお、 $font-family-***
と $font-family-bold-***
が同じ値だった場合、 font-weight: bold
のみが出力されます。
Sassを使用しない場合
css/echo-font.css
は、フォント指定のみをまとめたCSSファイルです。
このファイルを直接編集(置換)することで、フォントを変更できます。
以下のとおり echo.min.css
よりも後に読み込んで使用してください。
<link rel="stylesheet" href="/css/echo.min.css">
<link rel="stylesheet" href="/css/echo-font.css">