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%; }
ダウンロード
フォント生成に使ったスクリプトファイル等も含めています。ご自由にご利用下さい。
なぜかスクリプトで実行すると平仮名の「へ」が正しく表示されないので手動で修正しています。どこがおかしいのだろう。
*1:橋田表というらしいです http://openlab.ring.gr.jp/tcode/soft.html