Yaku Han JP

Site & Documentation

https://yakuhanjp.qranoko.jp

About

Yaku Han JP（ヤクハンジェイピー）は、Web 上の日本語テキストに含まれる約物を半角にする「約物半角専用 Web フォント」です。

font-family（CSS）のフォールバック機能を利用し、文字幅を調整した「約物だけのフォント」を優先的適応させます。レガシーブラウザ対応・動的コンテンツへの利用に向いている他、1 フォントが 4〜5KB と軽量なのが特長。

Font Family

ゴシック体（Noto Sans CJK JP）・明朝体（Noto Serif CJK JP）・丸ゴシック（Rounded M+ 1c）を使用可能。フォント名に s が付いているフォントはカッコだけを半角にします。

※バグ回避のため、すべてのフォントに .notdef space ellipsis が含まれています

Font Weight

How To Use

フォントを呼び出す CSS ファイルを読み込んで、font-family の先頭にフォント名を追記します。※以下は YakuHanJP（ゴシック体・約物すべて）を使った場合の例

<link rel="stylesheet" href="dist/css/yakuhanjp.min.css" />

.example {
  font-family: YakuHanJP, "Hiragino Sans" sans-serif;
}

CDN

npm

$ npm install yakuhanjp

CSS

SCSS

// Dart Sass Example: YakuHanRP Use CDN
@use "yakuhanjp/dist/scss/yakuhanrp" with (
  $yakuhanrp-eot-use: false,
  $yakuhanrp-cdn-use: true
);

Specific Edition

For Noto

2018 年 9 月 7 日、Google Fonts 本家に Noto Sans JP・Noto Serif JP が加わりました。日本語のサブセット配信機能がとても優秀です。ただ、通常の YakuHanJP とはウェイトが多少異なります。

そこで、専用のウェイト調整を行った CSS ファイルを用意しました #23。以下の CDN 配信ファイル（もしくはローカルの CSS ファイル）を読み込めば、Google Fonts 本家の Noto Sans JP・Noto Serif JP に YakuHanJP のウェイトが揃います。

For Narrow

macOS 10.13・iOS11 以降の Safari では、font-family に -apple-system を指定すると Sanfrancisco に加えて小ぶりのヒラギノ角ゴシックが出力されます。通常の YakuHanJP を被せると約物だけ太く大きく見えてしまいます。これは全体的に細い游ゴシックでも同様の現象がおきます。

そこで、細身のウェイト調整を行った CSS ファイルを用意しました #27。以下の CDN 配信ファイル（もしくはローカルの CSS ファイル）を読み込めばウェイトが自然になります。約物は細い分には気になりにくいため、対象のブラウザ以外で他のフォントと組み合わさっても影響が小さいです。

Support

Media

• HTML5 Conference 2016 LT "Yaku Han JP" by Qrac // Speaker Deck

License

• Yaku Han JP : SIL OFL 1.1
• Gothic fonts : Based on Noto Sans CJK JP licensed under the SIL OFL 1.1
• Mincho fonts : Based on Noto Serif CJK JP licensed under the SIL OFL 1.1
• Round Gothic fonts : Based on Rounded M+ 1c licensed under the M+ FONTS LICENSE

Credit

• Author: Qrac
• Organization: QRANOKO