Teitokuson-symbols


Kyouo-webfontサンプル
Webフォントを作ってみました。シンボルフォントです。
Webフォントとは、cssの「@font-faceルール」という規則を用いて、htmlに埋め込むことのできるフォントフォーマットのことをいうそうです。
この「@font-faceルール」により、ブラウザを閲覧するユーザのPC環境になくてもフォントを表示することができます。
htmlファイルやcssファイルと同じようにフォントファイルをサーバーにアップロードして、cssにそれなりの記述をして使用するのが基本です。
フォントフォーマットはeot、woff、ttfを用意しました。サンプルのhtmlファイルも同梱しています
埋め込めるフォントフォーマットとしては他にOpentypeも対応していますが、今回は用意していません。

ただし、表示できるブラウザが限定されていたり、レンダリングの挙動がブラウザごとに異なるようです。詳しくは以下をご参照ください。

自由自在にフォントを使う!| m-School
Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ – かちびと.net
意外と知らない?アイコンはWebフォントでつくるとこんなに便利! | KAYAC DESIGNER’S BLOG – デザインやマークアップの話
など。

表示サンプル(Mac の Firefox 3.6とSafari 4.1.3、Win IE 8、Win Google 17でしか確認していません。Win Opera11ではうまく表示されませんでした。)

cssでの記述は以下のようになっています。

@font-face {
    font-family: “webfont”;/*任意のファミリー名*/
    src: url(“eotファイルのurl”);/*for IE*/
}
@font-face {
    font-family: “webfont”;/*任意のファミリー名*/
    src: url(“woffファイルのurl”) format(‘woff’);/*for Firefox*/
    src: url(“TTFファイルのurl”) format(‘truetype’);/*for Safari Crome*/
}
.webFontClass {
    font-family: “webfont”;/*上記で決めたファミリー名*/
    letter-spacing:0.1em;/*少しすきまを開けました*/
}

IE 8は上記のように @font-face を IE 用と他のブラウザ用で分けないとうまく表示されませんでした。
htmlで下記のようにクラスを指定しています。

<span class=”webFontClass”>abcd</span>

※フォントファイルは別ドメインから読み込めないそうなので、css ファイルと同じドメインに配置する必要があります。

使えそうでしたら、使ってみてください。iPhone サイトや iPad サイトでも使えると思いますので。
あと、改変して再配布しない、とか、売っちゃわない、とか常識的な範囲でご使用ください。

Font ID:ex005

コメントを残す

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>