フォントグラフィック：ロゴデモンストレーション

デバイスとウェブフォントの組み合わせ／同じHTMLにCSSを変えているだけです／画像は使ってないので軽いです／２バイトですが漢字がないので超軽量！

CSS CHANGE

デバイスとウェブフォントの混植サンプル

ウェブフォントデモ

2011 WebFontDemo

10	雨にも負けず. 風にも負けず. 雪にも夏の暑さにも負けぬ. 丈夫なからだをもち. 慾はなく. 決して怒らず. いつも静かに笑っている.
11	雨にも負けず. 風にも負けず. 雪にも夏の暑さにも負けぬ. 丈夫なからだをもち. 慾はなく. 決して怒らず. いつも静かに笑っている.
12	雨にも負けず. 風にも負けず. 雪にも夏の暑さにも負けぬ. 丈夫なからだをもち. 慾はなく. 決して怒らず. いつも静かに笑っている.
13	雨にも負けず. 風にも負けず. 雪にも夏の暑さにも負けぬ. 丈夫なからだをもち. 慾はなく. 決して怒らず. いつも静かに笑っている.
14	雨にも負けず. 風にも負けず. 雪にも夏の暑さにも負けぬ. 丈夫なからだをもち. 慾はなく. 決して怒らず. いつも静かに笑っている.

使い方はカンタン！CSSがちょっとわかれば大丈夫。

1.例えばstylesheet.cssと名前をつけたスタイルシートに以下の記述をします。


@font-face{ 
font-family: 'wa';
src: url('wa.eot');
src: url('wa.eot?#iefix') format('embedded-opentype'),
     url('wa.woff') format('woff'),
     url('wa.ttf') format('truetype'),
     url('wa.svg#wa') format('svg');
}

@font-face {
    font-family: 'fgs-thin';
    src: url('fgs-thin-webfont.eot');
    src: url('fgs-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fgs-thin-webfont.woff') format('woff'),
         url('fgs-thin-webfont.ttf') format('truetype'),
         url('fgs-thin-webfont.svg#fgs-thin-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

2.HTMLのヘッダーにstylesheet.cssを読み込みます。

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

3.eot/woff/ttf/svgのウェブフォントデータもサーバーにアップしてください。

4.OSブラウザとも100%対応してます。iPadやスマートフォンでも表示可能です。

5.2バイトフォントですが漢字を省いてますので非常に軽量です。

6.CSSでfont-family名「wa」や「fgs-thin」で指定します。わからなければDLしたhtmlやCSSソースを参考にしてください。

7.カタカナフォントはOTFフォントも入ってます（wa.otf）。OSXでもWindowsでも普通に使えます。ひらがなで打ってもカタカナになります。漢字は使えません。

このページ内のその他のフォント表示など

このページ内で表示させているその他のウェブフォントなどは以下のソースを元にしています。

デバイスフォントを使ったデモ（WebDesigning誌）／OSXはHelveticaBold、WindowsはArialBoldを使い両OSでほぼ同じに見えるように再現しています。

アイコンを使ったデモ（WebDesigning誌）／アイコンウェブフォントなどを使ったデモンストレーションです。

2011/11/29 new update!?

`DOWNLOAD→wa.zip