約物半角専用のWebフォント

v3.4.1 / (OFL-1.1 AND MIT) / Repository / Releases

Simulator

|
<!-- HTML:CDNリンクを貼り付け -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp.min.css">

// CSS:font-familyを設定
.example {
  font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

Fonts

  • YakuHanJP

    ゴシック体(約物すべて)

    、。!?〈〉《》「」『』【】〔〕・():;[]{}

  • YakuHanJPs

    ゴシック体(カッコのみ)

    〈〉《》「」『』【】〔〕()[]{}

  • YakuHanMP

    明朝体(約物すべて)

    、。!?《》「」『』【】〔〕・():;[]{}

  • YakuHanMPs

    明朝体(カッコのみ)

    《》「」『』【】〔〕()[]{}

  • YakuHanRP

    丸ゴシック(約物すべて)

    、。!?〈〉《》「」『』【】〔〕・():;[]{}

  • YakuHanRPs

    丸ゴシック(カッコのみ)

    〈〉《》「」『』【】〔〕()[]{}

How To Use

CDN

  1. シミュレーターで使用するフォントの種類を選択
  2. 表示された <link> タグをサイトの <head> タグ内に配置
  3. CSS を記述:font-family の日本語フォントより前に YakuHanJP などを優先指定

npm

$ npm install yakuhanjp
  • webpack などで通常のセルフホスティングを行う場合は README.mdCSSを参照
  • Dart Sass や node-sass を使う場合は README.mdSCSSを参照

Specific

  • For Noto:Noto Sans JP または Noto Serif JP へ各種 YakuHanJP を適応する場合に使用する、ウェイト構成を最適化した CSS。
  • For Narrow-apple-system や游ゴシックなどの細身フォントへ各種 YakuHanJP を適応する場合に使用する、ウェイト構成を調整した CSS。

Support

Chrome Firefox IE Ege Opera Safari(Mac)
55~ 50~ 9~ 14~ 36~ 6~
Safari(iOS) Chrome(Android) Browser(Android)
7~ 51~ 4.4~

License & Credit