約物半角専用のフォント

v4.1.1 / (OFL-1.1 AND MIT) / Repository / Releases

Simulator

  • Before

  • After

    「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは9種類。Noto Sans JPに沿っています。

<!-- HTML：CDNリンクを貼り付け -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp.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 Browser

CDN

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

npm

  1. npm でパッケージをインストール
$ npm install yakuhanjp
  1. 使用する CSS ファイルへのパスを記述
YakuHanJP:  import "yakuhanjp"
YakuHanJPs: import "yakuhanjp/dist/css/yakuhanjp_s.css"
YakuHanMP:  import "yakuhanjp/dist/css/yakuhanmp.css"
YakuHanMPs: import "yakuhanjp/dist/css/yakuhanmp_s.css"
YakuHanRP:  import "yakuhanjp/dist/css/yakuhanrp.css"
YakuHanRPs: import "yakuhanjp/dist/css/yakuhanrp_s.css"

How To Other

OGP・GAME

CSS のようなフォールバック機能が使えない OG 画像生成やゲーム開発には、YakuHanJP を元の Google フォントに組み込んだマージフォントを使用してください。

  1. リポジトリのマージディレクトリから必要なフォントをダウンロード
  2. 使用環境に配置してパスを設定

例: satori と @resvg/resvg-js を使用した OG 画像生成の実装例は Playground にあります

License & Credit

  • Yaku Han JP : SIL OFL 1.1 AND MIT
  • Gothic fonts : Based on Noto Sans JP licensed under the SIL OFL 1.1
  • Mincho fonts : Based on Noto Serif JP licensed under the SIL OFL 1.1
  • Round Gothic fonts : Based on M PLUS Rounded 1c licensed under the SIL OFL 1.1
  • Author : Qrac
  • Organization : QRANOKO