Yaku Han JP

Site

• https://yakuhanjp.qranoko.jp

About

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

Detail

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

How To Use

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

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

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

Font Family

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

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

Font Weight

ウェイトは各 7 段階。ベースフォント毎にウェイト・ファイル名が若干異なるため、当ライブラリ内のファイル名も各ベースフォントに準じています。

CDN

• https://cdn.jsdelivr.net/npm/yakuhanjp/

jsDelivr で配信している CSS ファイルへのリンクを HTML 内に記述するだけで全ウェイトのフォントを利用できます。

npm

• https://www.npmjs.com/package/yakuhanjp

npm コマンドで任意のプロジェクトにインストールできます。

npm install yakuhanjp

SCSS

SCSS を使ったカスタマイズを強化しました。npm install 後、任意の SCSS ファイルで使用する YakuHanJP の SCSS ファイルを import します。変数をオーバーライドすれば、CSS から CDN のフォントファイルへダイレクトにリンクを貼ったり、EOT 形式を省いたりできます。

$yakuhanjp-eot-use: false;
$yakuhanjp-cdn-use: true;
 
@import "yakuhanjp/src/scss/yakuhanjp.scss";

Specific Edition

For Noto

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

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

• Noto Sans JP・Noto Serif JP 専用の CSS ファイルを追加 · Issue #23 · qrac/yakuhanjp

For Narrow

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

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

• macOS・iOS Safari の細字を考慮した CSS ファイルを追加 · Issue #27 · qrac/yakuhanjp

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