はちど

ボードゲームのレビューなど。

*

Webフォントを使ってみる。

      2013/03/31

Hachiです。
Xperia SXのカスタムカバーが届いてご機嫌です。

赤です。かっこいいです。おそらくLTE速度も3倍速くなると思います。そんなことをdocomoさんが言っていました。
# 普段使ってる場所でLTEの電波なんか拾えませんが。バッテリの減りが3倍になるので、LTEは常時OFFです。

閑話休題。
前回の記事に書いたとおり、これからはWeb技術の覚え書きがメインになります。
拙い記事になるかと思いますが、どうかおつきあいください。

さて、素人考えで「Webデザイン」というと、画面内のコンテンツ配置とか良いUIとか、そういうところがまず思い浮かびます。
もちろんそれらが不要とは言いませんが、実際に作ってみると色とフォントの選択というのも、結構頭をもたげる問題になります。
現在私は、自分のいま出せる技術を総動員してポートフォリオサイトを作ろうとしているのですが、まさに今、そこでつまづいています。

更に素人考えで、フォントなんて「MS Pゴシック」でしょう?どのサイト見てもそれで表示されてるよ?と思う方もいるかと思います。
もう少し知っていれば、どうせフォントをhtmlやcssで指定しても、見る側の環境に左右されるから決めるだけ無駄だろう
あるいは、広く見た目を統一させるには、文字で記述しないで、Illustratorで画像を用意するべきである、とも思えます。

ところがぎっちょん。
Webフォントというものを使うと、見る側の環境に左右されず、色々なフォントを使用することができるのです。キリッ

以下、ごく簡単な使い方です。

1. Webフォントを配布しているサイトで使いたいフォントを選ぶ。
例としてGoogle Web Fontsを使用します。

スクロールして、「これだ!」と思うフォントの下の「Quick-use」をクリックします。

2. 選んだフォントのlinkタグを、使いたいhtmlページのhead内に記述する。
Quick-useのリンク先を下へスクロールすると、下記のようなlinkタグがあると思います。


これをそのままhtmlのheadタグ内にコピペします。

3. フォントを使いたい場所へCSSを指定する。
さらに下にスクロールして出てくる、下記のようなfont-familyをCSSとして任意の場所へ指定します。


4. 終了。ひたすら眺めてにやにやしましょう。

では、実際に使ってみた例を以下に置いておきます。
Montserrat Alternatesというフォントをh1タグへ指定し、ページの見出しをかっこよくします。

[HTML]


[CSS(sample.css)]


[サンプル] – 上記HTMLからもう少し要素を追加したもの。スクリーンショット。
使用前

使用後

いかがでしょうか。フォントが変わっていることがわかると思います。
# 現在制作中のポートフォリオサイトを例にしているため、スクショでご容赦ください。
# フォント以外の変更点については、見なかったことにしてください。いずれ触れるかもしれません。

Webフォントは、フォントファイル自体がWeb上にあるので、環境を選ばずに同じフォントで文字を表示できる技術です。
デメリットとしては、

  • フォントファイルのダウンロードを伴うため、表示に時間がかかることがある。
  • 無償提供されているものには種類に限りがあり、有償提供の場合も多い。
  • (無償の場合は特に、ライセンスに注意が必要である。フォント全般に言えること。)

ということが挙げられます。
そしてこれらの理由から、日本語Webフォントの普及にはまだ疑問符を付けざるを得ません。
というのも、日本語は他の言語と違い、多数の漢字を使って文章を表現するため、フォントファイルはどうしても大きくなりがちで、Webフォント適用までにとても時間がかかってしまうからです。
Webサイト全体に適用するならまだしも、見出しの装飾程度に用いるのなら、画像でいいじゃん、となってしまう気もします。

sns-widget

更新情報の確認にはこちら!

 - Web技術, ポートフォリオ制作記