japanese-fonts.css

The CSS configurations for Japanese device/web fonts.

Installation

NPM

$ npm i -S japanese-fonts-css
# Recommend you to use along with PostCSS and postcss-import 
$ npm i -D postcss postcss-import

Then, import on your CSS file.

@import 'japanese-fonts-css';

Download

1. Just click [Download ZIP] button or git clone https://github.com/seamile4kairi/japanese-fonts-css.git.
2. Import or load the minimized CSS file:

/* from CSS */
@import 'dist/japanese-fonts.min.css';

<!-- from HTML -->
<link rel="stylesheet" href="dist/japanese-fonts.min.css" charset="utf-8">

Usage

Use with CSS Custom Properties

.sans-serif {
  font-family: var(--jp-sans-serif);
  ...
}
 
.serif {
  font-family: var(--jp-serif);
  ...
}
 
.monospace {
  font-family: var(--jp-monospace);
  ...
}

Or you can also redifne custom properties as you like:

:root {
  --custom-sans-serif: var(--font-apple-sans),
                       var(--font-ms-sans),
                       'ＭＳ Ｐゴシック',
                       sans-serif;
}
 
.hoge {
  font-family: var(--custom-sans-serif);
}

Reserved Custom Properties

• var(--jp-sans-serif): sans-serif / ゴシック体
  • var(--font-system): Fonts defined by OS (= San Francisco on Apple's devices)
  • var(--font-sf-text): San Francisco - Text
  • var(--font-yu-gothic): 游ゴシック (YuGothic)
  • var(--font-apple-sans): Helvetica Neue, ヒラギノ角ゴ (Hiragino Kaku Gothic)
  • var(--font-google-sans): Roboto, Noto Sans Japanese
  • NOT INCLUDED FONT-SETS
    • var(--font-sf-display): San Francisco - Display
    • var(--font-ms-sans): メイリオ (Meiryo)
• var(--jp-serif): serif / 明朝体
  • var(--font-yu-mincho): 游明朝 (YuMincho)
  • var(--font-apple-serif): Garamond, ヒラギノ明朝 (Hiragino Mincho)
  • var(--font-google-serif): さわらび明朝
• var(--jp-monospace): monospace / 等幅
  • var(--font-apple-mono): Monaco, Osaka-Mono
  • var(--font-google-mono): Noto Sans Mono Japanese
  • NOT INCLUDED FONT-SETS:
    • var(--font-ms-mono): ＭＳゴシック (MS Gothic)

cf. About Custom Properties

• SPEC
• PostCSS Plugins

Use with class or [data-jp-fonts] attribute

<!-- Define with CSS class -->
<p class="jp-font--sans-serif">sans-serif / ゴシック体を指定</p>
<p class="jp-font--serif">serif / 明朝体を指定</p>
<p class="jp-font--monospace">monospace / 等幅フォントを指定</p>
 
<!-- Define with [data-jp-font] attribute -->
<p data-jp-font="sans-serif">sans-serif / ゴシック体を指定</p>
<p data-jp-font="serif">serif / 明朝体を指定</p>
<p data-jp-font="monospace">monospace / 等幅フォントを指定</p>

License

MIT