CommentsPosted2012-06-06CSS3の@font-faceでWebフォントを使う時の書き方と、フォントファイルについてです。IEで対応するには書き方とフォントファイルが独自のものになります。@font-faceでWebフォントを使う時はフォントファイルをサーバーにアップロードして使います。ファイルでないと使用できません。ファイルへ変換できます。現在、ttf2eotはWeb上のサービスではなくなっているようです。下の「WOFFコンバータ」が使い方が簡単です。ファイルへ変換するWebサービスです。.eot”をクリックするだけです。ファイルの変換ができます。WOFFコンバータを利用するWOFFコンバータはフォント形式を変換できるソフトウェアです。Windows用とMac用とあります。.ttfファイルへ変換する事ができます。変換も出来るWebサービスです。形式を扱えるようです。ファイルに変換して対応できます。hail2u.net」を参考にさせて頂き以下のような書き方がいいのかなと思いました。(※なぜか半角で@fontとするとTwitterの@fontへリンクが自動で貼られてしまう為、以下コードの@を全角にしてあります。コピーする際はあとで@を半角に直して下さい。ローカルに同じフォントファイルがあればそれを利用する。)は各フォントファイルへのパスが入ります。‘)はフォントファイルの形式が入ります。CSSファイルの先頭に記入し、フォントを適用したい箇所へfont-familyの指定をします。ちびと.net」でその他の書き方や、Webフォントのメリット・デメリットやWebフォントをダウンロードできるサイトなどが紹介されています。フォントをWebフォントとして使ってみました。サンプルデモのコードは一番下にあります。フォントはフリーでダウンロード可能です。ファイルも入っていました!親切です。IEでみた場合のキャプチャ(※クリックで大きい画像がみれます)IE8での表示IE7での表示IE6での表示サンプルデモのコード(コピーの際は@を半角に直して下さい。id="container"><h1>Webfont-demo|memocarilog</h1><p>Museoフォントを使ったWebフォントのデモページです。CommentコメントをキャンセルEmailは公開されません。*Website↑AuthorSaoriホームページを作っています。犬とインターネットが好きです。愛犬はダックスフンド。内容を確認後チェックして送信Socialブログ更新のお知らせとWeb制作に関する情報を更新しています。