ZAPAnet総合情報局 > [Z]ZAPAブロ〜グ2.0 > プログラミングTIPS > 「めんまフォントお試しサイト」作った

「めんまフォントお試しサイト」作った

このエントリーをはてなブックマークに追加
2011年05月27日 カテゴリ:プログラミングTIPS
めんまフォントお試しサイト作りました。


めんまフォントお試しサイト


あの日見た花の名前を僕達はまだ知らない。| アニメ公式サイト」にて、めんまフォントプレゼントが始まりました。どういう感じで表示されるのか、試してみないとちょっとわかりにくいところがあったりするので、Webブラウザ上で簡単に試せるサイトを作ってみました。上のテキストエリアに文字を入力すると、その下にめんまフォントで文字が表示されます。


技術的には、CSS3の@font-faceを使って、TTFファイルを直接読み込んで表示しています。PC上にフォントファイルがインストールされていなくても表示できるので、便利な機能です。

即時性を高めるために、テキストエリアに入力するとすぐにその下に表示させるようにしました。JavaScriptで500ミリ秒ごとに入力をチェックしています。DQ9錬金レシピリアルタイム検索技術からの応用です。

なお、CSS3やJavaScriptに対応していないWebブラウザでは動作しませんのでご注意下さい。