Postcss Yu Gothic

Motivation

わざわざ游ゴシックについてグーグル検索しなくても、楽に使いたい
Do not bother to use Google Search for Gothic but want to use it comfortably

このプラグインはChromeでも読みやすい游ゴシックを指定する方法を参照して作られました。
This plugin was created with reference to link.

Example

最初に現れたYu Gothicを値に持ったセレクタの前に@font-faceが挿入されます。
@Font-face is inserted before the selector whose value is Yu Gothic which first appeared.

前...
Before...

body {
  font: 16px / 1.5 "Yu Gothic";
}

.class {
  font-family: "Yu Gothic";
}

後!!!
After!!!

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: normal;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

body {
  font: 16px / 1.5 "Yu Gothic";
}

.class {
  font-family: "Yu Gothic";
}

Install

$ npm i --save-dev postcss-yu-gothic
# or `yarn add --dev postcss-yu-gothic`

Transform with The Postcss

import yuGothic from 'postcss-yu-gothic';
postcss([yuGothic])
  .process(cssContent)
  .then(result => {
    console.log(result.css);
  });

Option

• weight: default:['medium', 'bold']
  出力するfont-weightを指定
  Specify output font-weight

License

MIT © nju33 [email protected]