約物半角専用の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.md の CSSを参照
  • Dart Sass や node-sass を使う場合は README.md の SCSSを参照

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