0.3.0 • Published 7 years ago
japanese-fonts-css v0.3.0
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
- Just click [Download ZIP] button or
git clone https://github.com/seamile4kairi/japanese-fonts-css.git
. - 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),
'MS Pゴシック',
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 - Textvar(--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 - Displayvar(--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-Monovar(--font-google-mono)
: Noto Sans Mono Japanese- NOT INCLUDED FONT-SETS:
var(--font-ms-mono)
: MSゴシック (MS Gothic)
cf. About Custom Properties
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