漢索フォント - にせねこメモ

Webフォントを利用しています。スマホの人はPC用のページをご覧ください。

漢直アドベントカレンダー二十四日目です。
漢直アドベントカレンダー二十四日目です。

漢索/JSで標準で表示される打鍵図*1を、フォントを使って再現してみようとしました。とりあえずTUT-Codeの打鍵を表示するよう作成しました。漢字等をこのフォントで表示させると対応する打鍵図が表示されます。
スクリプトを利用して生成しているので、他の漢直方式のも作成できるはずです。
改善点はありますがひとまず形になったので公開。

サンプル

漢漢直直でで楽楽ししいい日日本本語語入入力力。。

実際に入力して試せます。

~~下のようなCSSを書くとWebフォントとして利用できます。~~Google Driveのホスティングサービスが終了したので下のコードをコピペしても使えなくなりました。

@font-face {
	font-family:'Kansakutut-Regular';
	src: url('https://nixeneko.sakura.ne.jp/hatenablog/tutkansaku_webfont/Kansakutut_gdi.eot');
	src: url('https://nixeneko.sakura.ne.jp/hatenablog/tutkansaku_webfont/Kansakutut_gdi.eot?#iefix') format('embedded-opentype'),
		url('https://nixeneko.sakura.ne.jp/hatenablog/tutkansaku_webfont/Kansakutut_gdi.woff') format('woff'),
		url('https://nixeneko.sakura.ne.jp/hatenablog/tutkansaku_webfont/Kansakutut_gdi.ttf') format('truetype'),
		url('https://nixeneko.sakura.ne.jp/hatenablog/tutkansaku_webfont/Kansakutut_gdi.otf') format('opentype'),
		url('https://nixeneko.sakura.ne.jp/hatenablog/tutkansaku_webfont/Kansakutut_gdi.svg#Kansakutut-Regular') format('svg');
	font-weight: 400;
	font-style: normal;
}
.kansakutut{
	font-family: 'Kansakutut-Regular';
	font-size: 300%;
}