わさっきhb

大学(教育研究)とか ,親馬鹿とか,和歌山とか,とか,とか.

フリーの教科書フォントってあるの?

さくらんぼ計算(2015.02)を更新しました.最初に絵を置き,いくつか誤記などを修正しました.
その絵なのですが,今回,2種類の方法で作成しました.1つは,convertコマンドのワンライナーです.

FONT=/cygdrive/c/Windows/Fonts/calibri.ttf; convert -size 245x160 'xc:#cff' -fill none -stroke black -strokewidth 3 -draw "line 115,45 80,115 line 115,45 150,115" -strokewidth 1 -draw "line 25,45 75,120" -fill '#f99' -stroke black -strokewidth 1 -draw "arc 58,105 103,150 0,360 arc 128,105 173,150 0,360" -fill black -strokewidth 0 -pointsize 40 -font $FONT -draw 'text 10,40 "7 + 4 = 11" text 71,140 "3" text 140,140 "1"' -pointsize 28 -draw 'text 17,95 "10"' -quality 95 cherry_7+4=11.jpg


もう1つは,JSFiddleです.Firefoxで編集を重ね,外に見せても大丈夫なSVG画像を作成してから,スクリーンショットをとって,JPEGに保存しました.


どちらも,被加数(たされる数)・加数(たす数)などを変更すれば,それに応じた絵ができます.
今回時間をとったのは,JSFiddleのほうで,それも,フォントの選択です.
教科書体のフォントに少しでも近づけようと,教科書 数字 字体で画像検索し,いろいろ調べたところ,次のことが分かりました.
まず,モトヤとモリサワがそれぞれ,書体を販売しています.

とはいえなかなかの値段ですし,再現性のあるコードそして出来上がりを追求するとなると,購入は得策ではありません.
そこで画像一覧に立ち返り,普段PCで使っているフォントと見比べながら,教科書体の特徴をいくつか洗い出してみました.

  • 「1」は真っ直ぐの縦棒(書き始めの斜め線や,下部の横線がない).
  • 「3」の上半分は,下半分と同じく,丸みがある.
  • 「4」の1画目と2画目の始まりは,くっついていない.
  • 「6」の書き始め部分と「9」の書き終わり部分は,真っ直ぐ(丸みを帯びない).
  • 「7」は最初に短い下向き線がある.
  • 「8」と「9」の書き始め部分に,尖りがある.
  • サンセリフである.
  • 書き始め・書き終わり部分は(他の箇所とくっついていなければ),丸みを帯びている.SVGの指定で言い換えると,stroke-linecapの値はround.

これらの特徴にできるだけ合致する,フリーのWebフォントを探してみました.WebフォントのCSS指定2014年度版とこれまでの歩み - WEBCRE8.jp経由で,Google Fontsにアクセスし,テキストを「7 + 4 = 11」に書き換えてから,下へ下へと見ていきました.ある程度,参照して,「8」と「9」の書き始め条件に合うものが,1つもないことが分かりました.また,「1」の条件と「7」の条件をともに満たすものも,見当たりません.
そこそこのところで探索を打ち切りまして,上位に戻って個人的な好みで"Lato"を選びました.
Googleのサイトでは,次の指定をせよと案内してくれます.

<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css>

しかしこれをそのまま,JSFiddleのHTML欄に打ち込むと,"For external CSS files use the Resources panel on the left."という警告メッセージが出ました.
サイドバーのExternal Resourcesに,http://fonts.googleapis.com/css?family=Latoを書いて追加しても,フォントが反映されません("Open Sans"だとうまくいったのですが).バッドノウハウを承知で,http://fonts.googleapis.com/css?family=Latoにアクセスして表示される内容を,CSS欄に貼り付けました.
ところでLatoのフォントは,「1」の条件を満たしていません.斜め線も横線もあります.
これについては,「1」を「I」(英大文字のアイ)に置き換えて対処しました.
JSFiddle版については,もう少しだけ時間をとって,改良する予定です.具体的には,被加数と加数をプルダウンメニューで指定できるようにします.さくらんぼ計算で求められる組み合わせのときはすぐに表示を更新し,そうでないときは「できませんよ」のメッセージを表示するように,したいところです.

*1:今見ると,IEChromeでは期待する絵になっていません.