Webフォントを設定

| コメント(0) | トラックバック(0)

新しいWebの規格 HTML5とCSS3によって「Webフォント」という機能が利用できるようになりました。

通常ホームページではフォント(字体)を変更することは基本できず、(変えたとしても、そのフォント:字体が入っていなければ他のパソコンで見たら反映されません) 通常のゴシックか明朝体程度での利用でしかできませんでした。

今回のHTML5&CSS3によって可能になったWebフォントという機能jですが、これはパソコンに入っているフォント:字体を使用せずに、サーバー上に保存してあるフォントを都度パソコンにダウンロードして表示するようにしたものです。

これによってパソコンに入っていないフォントでも表示できるようになりました。 様々なフォントを利用できるため(もちろんライセンスなど注意すべきことはありますが)、見た目上カッコいいものや手書き風のフォントをテキスト情報のままに使用できます。このテキスト情報のまま利用できるので、今まで見出しや目立つ部分の文字は画像として作成するしかなかったのですが、その必要がなくなりました。テキスト情報(文字情報)ですので、そのまま検索エンジンにもテキスト情報として伝わりますので、その点からも良い影響があります。

イメージとしてわかりにくい場合こちらのブログを見てください。

英文筆記体の例

webフォント英文例

 

下記が実際の英語筆記体のWebフォントの例です。

Welcome to Surugatomo-no-kai Blog!
This article is test for webfont.

テキスト情報ですから、上記文字はコピーしてメモ帳などに貼り付けできます。

 

こちらは日本語フォントの例

日本語のWebフォント

 

英文の筆記体の部分も、写真の下の日本語の部分もテキスト情報ですので、そのままコピーしてメモ帳などに貼り付けることができます。

 

特に英語の場合はGoogleが無料でWebフォントを提供していますので、比較的簡単に導入することができます。日本語については今回事例のサイトでは2012年末まで無料で利用できる試用版を使っています。

ただし注意としては、英語の場合アルファベット26文字それぞれ大文字小文字と記号などで数が少ないのでファイルが軽くて、サーバからダウンロードするのに時間がかからなくていいのですが、日本語の場合は漢字が含まれることもあり、ダウンロードに時間がかかり、文字の表示に一瞬遅れがでたりすることがあります。日本語の場合はタイトルなど文字数の限られた場所での利用になるのかもしれません。

これも必要な文字のみダウンロードするような設定も可能ですが、フォントの利用にはライセンス(著作権)が関わるので、利用する際はその点確認しておく必要があります。 日本語の場合やはりいい字体は有料のものが多いですね。

 

次回GoogleのWebフォントや日本語の試用版などご紹介したいと思います。

 

2013年4月25日現在のGoogle Webフォントサイトでの設定方法の記事

 

静岡、浜松、豊橋、群馬のIT勉強会「駿河友の会」では随時テーマを取り上げて勉強会を開催しています。今後はご要望を聞きながらこういったテーマも取り上げていきたいと思います。

駿河友の会への入会や内容についてのお問い合わせは、「駿河友の会」ご紹介サイトお問い合わせからよろしくお願いいたします。

トラックバック(0)

トラックバックURL: http://www.surugatomo.com/mt/mt-tb.cgi/508

コメントする