0120-899-952 
ホームページ制作YCOM
料金体系
制作について
制作実績
よくある質問
お問い合わせユーザーの見る環境によって使えるフォントが決まっていたので、フォントには制限があったんですね。
CSS3から使えるようになったWEBフォントは、サーバー上のフォント情報を使って表現できるので、制作者側がフォントを自由に使えるようになりました。
※以前からIEではこの方法が実装されていましたが、最近のChromeやSafariでも使用できるようになったため、一気に広がった感じです。
たとえば、次の一文のように、WEBフォントを使えば、これまでとは違ったフォントを使って表現することができます。
WEBフォントを使いこなせれば、新しい表現が可能になります。
これ、画像じゃないですよ、テキストなんです。
マウスでドラッグするとコピーだってできてしまいます。
テキストで表現できるということは、もちろん文字の大きさや色だって簡単に変更できます。
WEBフォントを使いこなせれば、新しい表現が可能になります。
WEBフォントを使いこなせれば、新しい表現が可能になります。
WEBフォントを使いこなせれば、新しい表現が可能になります。
WEBフォントを使いこなせれば、新しい表現が可能になります。
すごく便利ですよね。
これまで、フォントの表現には限界があったのですが、
これでこれまでのフォントの制限がなくなったので、見出しの表現などにもバリエーションが出てくるでしょう。
そんなWEBフォントの使い方をマスターして、ホームページのデザインを一歩進めてみましょう。
WEBフォントの使い方
フォントの準備
まずは、使用するフォントを準備します。
欧文に対して、和文フォントというのは文字数が多いため種類が少ないですが、それでもたくさんの楽しいフォントが配布されています。
好きなフォントファイルを探してダウンロードしてみましょう。
次に、フォントを誰でも使えるようにしなければいけないので、
先ほどダウンロードしたフォントファイルをサーバーに上げておきます。
フォントの設定
次に、使用するフォントを設定します。
<head>内や外部CSSで次のスタイルを設定します。
@font-face {
font-family: myfont; /* フォントに名前を付ける */
src: url('font.otf') format('opentype'); /* フォントのURLを指定する */
}
後でフォントを使用するために名前を付けます。
font-family: myfont; /* フォントに名前を付ける */
使用するフォントを読み込ます。
少しややこしいですが、このような書き方をします。
src: url('font.otf') format('opentype'); /* フォントのURLを指定する */
formatに入るのは、フォントの種類に応じて次のような値になります。
| 形式 | 拡張子 | format()の値 | 概要 |
|---|---|---|---|
| TrueType | .ttf | truetype | WindowsやMacで使われる一般的なフォント形式 |
| OpenType | .ttf, .otf | opentype | PostScriptとTrueTypeを統合したフォント形式。TrueType形式で作成されたものは「.TTF」、PostScript形式のものは「.OTF」となる |
| WebOpenFontFormat（WOFF） | .woff | woff | Web用の新しいフォント形式。データが軽いのが特徴。 |
| EmbeddedOpenType（EOT） | .eot | embedded-opentype | 米マイクロソフトが開発したWebページ用のフォント形式。IEのみ対応 |
| SVG Font | .svg, .svgz | svg | SVGを利用したフォント形式 |
フォントの使用
上で設定したフォントを使いましょう。
使い方は、通常のfont-familyと同じです。
フォント名は先ほど@fint-faceで指定した名前を使います。
div{
font-family:myfont;
}
これまで使えなかったフォントを使えるようになれば、これまでよりも表現の幅がぐっと広がることになるでしょう。
ぜひ、うまく使ってください。
ファイルのアップロードも細かい指定も難しい、
もっと簡単にWEBフォントを使いたい！
そんな人にはもっと簡単にWEBフォントをつかえる、Googleフォントの使い方はどうですか。
