【Yaku Han JP】カッコや句読点、ビックリマークなどの文字幅を半角にできる日本語Webフォント

「カッコから始まる文章は行頭がビシッときまらない」
「全角文字に半角文字のカッコはバランスがおかしい」

そんな悩みを解決してくれるのが、「Yaku Han JP」です。
Yaku Han JP(ヤクハンジェイピー)は、Webサイト上の日本語フォントに含まれるカッコや句読点、ビックリマークなどの約物を全角文字のまま、文字幅のみ半角にできるWebフォントです。

Yaku Han JP
目次

Yaku Han JPの使い方

Yaku Han JPはCDNから利用できるので、次のコードをHTMLのhead内に挿入します。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp.min.css">

CSSではfont-familyの最初に「YakuHanJP」を読み込みます。

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

WordPressで利用する場合はfunctions.phpに下記のコードを追加します。

add_action( 'wp_enqueue_scripts', 'output_header_css' );
function output_header_css() {
	wp_enqueue_style(
		'yakuhanjp',
		'https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp.min.css',
		array(),
		'',
		'all'
	);
}

Yaku Han JPが対応している書体

Yaku Han JPは、多くのWebサイトで一般的に使用されている「ゴシック体」「明朝体」「丸ゴシック体」に対応しています。ウェイトも各書体7段階あり、幅広いWebフォントに合います。

Yaku Han JPが対応している書体

Yaku Han JPをCDNから利用する

はじめにも書きましたが、Yaku Han JPはCDNから利用できます。

YakuHanJP(ゴシック体・約物すべて)

ゴシック体 (約物全部入り) 、。!?〈〉《》「」『』【】〔〕・():;[]{}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp.min.css">

YakuHanMP(明朝体・約物すべて)

明朝体 (約物全部入り) 、。!?《》「」『』【】〔〕・():;[]{}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp.min.css">

YakuHanRP(丸ゴシック体・約物すべて)

丸ゴシック体 (約物全部入り) 、。!?〈〉《》「」『』【】〔〕・():;[]{}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanrp.min.css">

日本語Webフォント「Noto Sans JP」に最適化された【YakuHanJP_Noto】

Google Fontsからでている日本語Webフォント「Noto Sans JP」「Noto Serif JP」のウェイトに合わせた【YakuHanJP_Noto】もCDNから利用できます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp-noto.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap&subset=japanese">

CSSではfont-familyの最初に「YakuHanJP_Noto」を読み込みます。

body{
  font-family: YakuHanJP_Noto, 'Noto Sans JP', sans-serif;
}

これまでCSSの疑似要素(before,after)で全角の「」や【】、{}を字詰めしていた私にとって、「Yaku Han JP」はまさに神サービス!!制作者であるDESIGN & CODE CREATORのQrac(クラク)さんに感謝です。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次