SVGフォントを作る

ethertank

License: Refer to code comments

Fork
2
Fav
0
View
2186
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 105 lines
  • HTML 101 lines
  • CSS 21 lines

SVG フォント手打ち作成。なかなか難しい。

原点(0,0) は左下。

v100 なら上に 100 移動。

h100 なら右に 100 移動。

v は相対、V は絶対。

canvas とかと上下逆。SVG の他の要素と比べても上下逆。

左右は一緒なのがまたこれ難儀な。


必要なグリフが揃ったらプレビュー用の text 要素とかを削除。


正直おとなしく Inkscape とかで作った方が良い気もする。


中抜きは逆に回せばいいみたい。


斜めが細い。計算しないとだ。


ユニットサイズ 9*9 から 7*7 に変更。arial と上っ面が揃った。 それにともなって全部右に寄ったので修正。 M と 4 はまだテキトー。斜めがな…。


B の右下、右中央、右上を欠こうとしたらこのサイズだと駄目かも。 また考える。


http://onlinefontconverter.com という Great なツールを発見。

SVG 内にプレビュー用の text 要素などがあれば削除し、 XML 宣言及び svg 要素を以下の様に書き換え、

<?xml version="1.0" standalone="yes"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg id="font" xmlns="http://www.w3.org/2000/svg">

このツールで TTF に変換。

et-7.ttf [PublicDomain]: http://jsrun.it/assets/u/1/C/o/u1CoR

ファイル名を et-7.ttf に変更で使用可能。 時計用に AMPM:0123456789/[] と半角スペースのみを内包したフォント。

使ってくれてもいいのよ ゚*。(・∀・)゚*。


※ほんとは OTF にしたいんだけどまだ上手くいってない。

  • SVGフォントを作る
  • SVGフォントを作る

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

ethertank

Author

  • Twitter
  • Github

prototype を拡張したいお年頃

個人的に今、SVGがアツい(だいぶ遅い)

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Forked

sort by

ethertankethertank

  • 0
  • 0
  • 499
  • 165/101/13