Yaku Han JP - 約物半角専用のフォント (original) (raw)
約物半角専用のフォント
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
- シミュレーターで使用するフォントの種類を選択
- 表示された
<link>
タグをサイトの<head>
タグ内に配置 - CSS を記述:
font-family
の日本語フォントより前にYakuHanJP
などを優先指定
npm
- npm でパッケージをインストール
$ npm install yakuhanjp
- 使用する 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 フォントに組み込んだマージフォントを使用してください。
- リポジトリのマージディレクトリから必要なフォントをダウンロード
- 使用環境に配置してパスを設定
例: 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