画像フォントの世界

概要

自分でフォントを作成してみたいと思ったことはありませんか? 日本語の場合、ひらがな、カタカナ、漢字があるため自作は大変ですが、アルファベット(英数字および記号)だけなら何とかなりそうだと思いませんか? すぐ思い付くのが文字毎に画像ファイルを作成し、img要素を羅列する方法です。 もちろん羅列するのは大変なので、Javascriptでやらせようと思った人もいると思います。 しかし、そもそも文字毎にファイルを分けるのが大変です。 そこで16×8文字(ASCII部のみ)の画像1枚で文字列を表示するJavascriptを作ってみました。 以下の二重線内の文字は全てこの6×10ドットフォント画像のみを使用しています。 当然(?)ですが、等幅フォントになります。では早速画像フォントを見てください。

The quick brown fox jumps over the lazy dog.A UNIQUE AND RICH FONT WITH LOVE.

文字が小さくて、ごめんなさい。それはこのフォントが6×10ドットだからです。 私にとってサンプルとして用意出来るのは、これ位のレベルしか出来ません。それにこれならば、レトロ風とごまかせますので。 とは言え、小さなフォントを使用した理由は勿論あります。次の画像フォントを見てください。

The quick brown fox jumps over the lazy dog.A UNIQUE AND RICH FONT WITH LOVE.

このように倍率を指定することが出来ます。ちなみに2倍で表示しています。 ただし拡大するとスムージング処理により画像が滑らかになってしまい、ドットフォントと相性がいいとは言えません。 このスムージング処理はブラウザによっては変更することが出来ます。 以下はCSSでimage-renderingにpixelatedを指定したときの結果となります。 (※現在、Chromeは対応していますが、Microsoft Edgeは対応していません。)

The quick brown fox jumps over the lazy dog.A UNIQUE AND RICH FONT WITH LOVE.

どうでしょうか?ドットフォントの雰囲気が出ているでしょうか?

画像フォント一覧

何種類かフォントを作成してみました。

4×6ドットフォント4×6ドットフォント

IN ANOTHER TIME, IN ANOTHER WORLD... THE BLUE CRYSTAL ROD KEPT THE KINGDOM IN PEACE. BUT THE EVIL DEMON DRUAGA HID THE ROD AND THE MAIDEN KI IN A TOWER. THE PRINCE GILGAMESH WORE GOLD ARMOR AND ATTACKED MONSTERS TO HELP KI IN THE TOWER OF DRUAGA.

4×8ドットフォント4×8ドットフォント

GIL the Golden Knight went to the tower to defeat DRUAGA. There are many monsters waiting there, as well as traps. But GIL overcomes the obstacles courageously. The Goddess ISHTAR saw GIL fighting and compassionately provides GIL with powers to defeat DRUAGA. And GIL fights on with the help of the shinning Blue Crystal Rod to defeat DRUAGA and to seal DRUAGA's magic power with the Ruby Mace. Because DRUAGA's magic was dispelled, GIL's lover KI could return to human form. And the tower which was restored by DRUAGA's magic power, returned ruins again,so the exit could not be found. The original resident of the tower,QUOX the Dragon, want back to his dwelling because DRUAGA's magic was dispelled. But other monsters lost the power that controlled them and became more fierce, and kept onwondering inside the tower. Although they had defeated DRUAGA, the world was still sealed in darkness. To save the world, GIL and KI must take out the Blue Crystal Rod, which is the center of the power of Goddess ISHTAR safely out of the tower. The world is waiting for "The Return of ISHTAR"

6×10ドットフォント6×10ドットフォント

... IN ANOTHER TIME ... IN ANOTHER WORLD Near the Euphrates River was the Babylim Kingdom where King Mardul & his people lived peacefully. The god Anu bestowed upon the people the legendary Blue Crystal Rod & placed it in the sky above the kingdom. But,as Emperor Balarant of Sumer Empire caught wind of it,seized & enslaved Babylim. Then,he forced the people to build a tower that would reach the heavens just to procure the Rod. For this blasphemous act, Anu punished the Empire by destroying the dreadful tower. With what transpired,the Rod's gleam were lost & Druaga,whom the Rod had sealed,were released. With his power restored, Druaga repaired the tower & hid the Rod at the top floor. To retrieve the Rod,the goddess Ishtar summoned a sorceress of Babylim, the maiden named Ki. "Ki,I give you this magic tiara that grants the power of flight.Please recover the Rod from Druaga." This is how Ki headed for the Tower of Druaga started.... "THE QUEST OF KI"

6×6ドットフォント6×6ドットフォント

IN OTHER DIMENSIONAL SPACE, THREE JEWELS KEPT THE KINGDOM IN PEACE. BUT THE JEWELS WERE STOLEN AND VARALYS WOKE FROM SLEEP. VARALYS MADE ANN INTO FAIRIES. A MAN CALLED JIM WHO COULD NOT ENDURE TO SEE PEOPLE TORTURED DECIDED TO EXTERMINATE THE DEVIL. HE TRIED TO ATTACK THE MONSTERS TO REESTABLISH THE KINGDOM.

8×8ドットフォント8×8ドットフォント

MSX用自作フォントです。

This is a story occured in different space from we live. It was a wonderful world dominated by the swords and the magic. Those who living in that world called there "Fairy Land". As the times dominated by the monsters had finished, people were intoxicated with the peace, as you know. At that time, an incident was occurring in the bottom. A "Consciousness" filled with evil awoke! Though it created new monsters, brought the dead back to life, and organized a world, it was not satisfied. So it wanted to dominate "Fairy Land". Monks noticed it from early time and told the people about it. But they never gave ear. Monks were disappointed at them. "It won't be long before it appers. Are there any savior?" God was impressed such monks' prayer, and warped the peace-time an innocent boy living in the human world.

8×10ドットフォント8×10ドットフォント

PC-6001mkII/PC-6601エミュレーター用自作フォントです。 8×10ドットあるとフォントの形状もデザインの余地が出てきます。

関係ないですが、今回下記メッセージをWeb検索したのですが見付けられず、OP動画からメッセージを拾いました。 それで合っているか心配だったのでスペルチェックもかねて翻訳サイトで翻訳してみたのですが、 上手く翻訳出来なかった部分もあり、その部分をthatに置き換え、または挿入してやるといい感じに翻訳出来ました。 that万能説。

The Evil Crystal like a nightmare was broken in pieces. And people have lived in peace without the fear of being attacked by the monstar. This is Fairy Land where witchcrafts and swords are ruling. But no fairies are seen any more. And Fairy Land is just like a human world. One night. A huge pillar of flames shot up with a rumbling of the ground. But the night passed quietly ..... The next day. A strange door appeared in the middle of Fairy Land. The people going through the door are thrown far away. Other unusual mishaps such as cracks in the ground also started despite disaster can never happen in Fairy Land. Taking the situation serious, the monk ordered a young man to find out the cause of this unusual situation. The young man is going to set out on the adventure to defend his world, And you are the young man.