'webフォント' Tag

webフォントとjquery.typist.jsを使ってRPG風のテキスト効果を作成する方法

maincatch

先週の記事サンプルで作っていたRPG風のテキスト効果を作成する方法をご紹介いたします。

作成準備

使用するファイルを下記からダウンロードされて下さい。

使用するフォント:8×8 ドット日本語フォント「美咲フォント」
使用するJQueryプラグイン:jquery.typist.js

webフォントの使用方法は先週の記事を参考にされて下さい。

JQuery本体とjquery.typist.jsの読み込み

ダウンロードが完了したらJQuery本体と「jquery.typist.js」のhtmlへの読み込みです。

<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>
<script src=”js/jquery.typist.js”></script>

例のごとく、必ずJQury本体は「jquery.typist.js」より先に読み込みをして下さい。

HTMLの記述

<div id=”wrap”>
<div id=”text_wrap” class=”myWebFontClass”>
<div id=”text_wrap_inner”></div>
</div>
</div>

CSSの記述

body{
 height:100%;
 background-color:#000;
margin: 0;
padding: 0;
position: relative;
min-width: 600px;
min-height: 400px;
}

#wrap{
 color:#fff;
margin: -200px 0 0 -300px;
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
border-radius: 15px ;
 -moz-border-radius: 15px ;
 -webkit-border-radius: 15px ;
 border:3px solid #fff;
}

#text_wrap_inner {
 margin:30px 30px 0 30px;
}

今回は画面の真ん中に角丸のBOXを作成しテキストを表示さていますので、少しCSSの記述が多いですが適宜作成されたい状況に応じて変更されて下さい。

javascriptの記述

jQuery(function($){
$(‘#text_wrap_inner’)//文字列を表示させたい要素
.typist({ speed: 12 })
.typistAdd(‘※どこからともなく声が聞こえる「おお…ニワカモノよこんなところであきらめるとはなにごとじゃ。もういちどそなたにチャンスをあたえよう」。\n’);
});

上記のコードを外部ファイルまたはHTML内部に<script>で記述されて下さい。これでOKとなります。

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

日本語フリーフォントをwebフォント化してwebサイトに使用する方法

main_catch

最近webサイトでグーグルwebフォントを使用して画像を使用せずに魅力的なテキスト装飾をされているサイト(最近といっても2,3年前から普通に見かけますが・・・)をよく見かけます。ただ、グーグルのwebフォントは日本語が今のところ一種類しか無いので、フリーで公開されている日本語フォントをwebフォントに変換してサイトに使用する方法を今回はお届けします。

使用したいフォントのライセンスを確認する。

今回の記事で参考にさせて頂いたサイトにもステップ毎に表記されているのですが、フリーで公開されている日本語フォントをwebフォントに変換する場合、注意しなければいけないのが、フォントのライセンスになります。フォント利用規約などを確認して貰えばそのフォントのライセンスが分かると思いますが、「いや権利関係は苦手です!!」という方は 「hirok-k.comさん」こちらのサイトでwebフォントとして利用できるフォントを調査されているので、参考にして頂ければと思います。 この記事では8×8 ドット日本語フォント「美咲フォント」を使用させて頂きます。

使用したいフォントの形式をwebフォントで使用できるように変更する。

webフォントとして利用できる形式として…

■ttf (TrueType)
■otf (Open Type Font)
■woff (Web Open Font Format)
■eot (Embedded Open Type)
■svg (Scalable Vector Graphics Font)

上記5つの形式が存在します。

そして各ブラウザのwebfontフォーマットの対応状況です。

ブラウザ ttf/otf eot woff svg
IE × ×
Safari ×
Firefox × ×
Opera ×
Chrome ×

そして日本語フォントは「ひらがな/カタカナ/漢字」とアルファベットで形成されるフォントよりデータが格段に重いためページ読み込み時に少し時間が掛かってしまいます。そんな時はフォントをサブセット化して使用する文字のみ設定すれば、かなりフォントデータを軽量化できます。

今回はサブセット化せずにやっていきます。←※めんどくさいからじゃないですよ(笑)webフォント化したい文字列が増えたら毎回サブセット化をやり直さないといけなくなるからですよ(笑)

フォントのwebフォント化は武蔵システムさんWOFFコンバータを使用させて頂きます。

WOFFコンバータをダウンロード→起動すると

img01

上記画面が表示されます、変換するフォントを指定して、「.eotファイルを作成する」にチェックを入れて下さい。サンプルをHTMLで確認したい時はその下の項目にもチェックを入れると確認用htmlが作成されます。後は「作成開始」をクリックするだけ!!

HTML/CSSのマークアップ

CSSのマークアップ

@font-face{
font-family: ‘UseFontStyle’; /* 自由な名前をつけることができます */
src:url(‘../font/misaki_gothic.eot’); /* IE9以上用 */
src:url(‘../font/misaki_gothic.eot?#iefix’) format(‘embedded-opentype’), /* IE8以前用 */
url(‘../font/misaki_gothic.woff’) format(‘woff’), /* モダンブラウザ用 */
url(‘../font/misaki_gothic.ttf’) format(‘truetype’); /* iOS, Android用 */
}

.WebFontClass {
font-family: ‘UseFontStyle’;
}

HTMLのマークアップ

<div class=”WebFontClass”>「WebFontClass」を付けた要素のテキストにwebフォントが適用されます</div>

以上で完成となります。ちなみに今回作成したサンプルはこちらです。初回読み込み時はフォントが適用されるまでタイムラグがありますので、フォントが適用されていない場合はしばらくお待ちください

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!