kanji_kana / 2014/10/16

漢字とかなを、明朝体とゴシック体で区別しています。

HTML

漢字とかなを、明朝体とゴシック体で区別しています。

CSS

#text {
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: -0.1em;
}

.kanji {
	color: #000;
	font-family: "YuMincho";
	font-weight: bold;
}

.kana {
	color: #111;
	font-family: "MS PGothic";
}

JS

$(function(){

	// 1文字ずつspanで囲う
	$('#text').children().andSelf().contents().each(function() {
		if (this.nodeType == 3) {
			$(this).replaceWith($(this).text().replace(/(\S)/g, '$1'));
		}
	});

	// spanの漢字／仮名判別
	$('#text span').each(function() {
		var text = $(this).text();
		var unicode = text.charCodeAt(0);
		if (
			(unicode>=0x4e00  && unicode<=0x9fcf) || // CJK統合漢字
			(unicode>=0x3400  && unicode<=0x4dbf) || // CJK統合漢字拡張A
			(unicode>=0x20000 && unicode<=0x2a6df) || // CJK統合漢字拡張B
			(unicode>=0xf900  && unicode<=0xfadf) || // CJK互換漢字
			(unicode>=0x2f800 && unicode<=0x2fa1f)
		) {
			$(this).addClass('kanji');
		} else {
			$(this).addClass('kana');
		}
	});

});