menu
menu

キーワード検索

 

前月(9月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  6. ( 5↓) 【jQuery入門】jQueryで日時を表示
  7. (10↑) 【HTML5】HTML5・ページ作成の基本
  8. ( 9↑) 【MySQL】Windows 10にMySQLをインストール
  9. ( 8↓) 【Mac Tips】MacにInkscapeをインストール
  10. ( 6↓) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

@font-face【CSS3リファレンス】

  • CSS

@font-face

こんにちは(・∀・)

CSS3で新しく追加された機能をご紹介します。今回ご紹介するのは@font-face(Webfont)です。

概要

Webサイト上で表示できるフォントはパソコンにインストールされたフォントだけです。インストールされているフォントはユーザーごとに異なるので実際に使えるフォントはパソコンにデフォルトでインストールされているフォントだけになります。


@font-face {
  font-family: myFonts;
  src: url("フォントurl") format("opentype");
}
.sample {
  font-family: myFonts;
}

CSS3ではサーバ上にあるフォントを指定してWebサイトで使用することができます。それによってユーザーの環境に左右されずに意図したデザインのフォントを利用して表示することが出来る様になりました。ただし、日本語フォントは文字数が多いため読み込みに時間がかかるというデメリットもあります。また、Webフォントとして使用するための使用ライセンスには注意が必要です。

WebフォントをWebサイトで使用するには、日本語のフリーフォントを探し、フォントのライセンスを確認、Webフォントファイルを作成してサーバにアップしてCSSで指定、フォントのURLとフォーマットを指定し、それに名前を付け、その付けた名前を通常のfont-familyで指定して使用します。

ブラウザ毎に指定方法が異なるのでご注意ください。

CSS

@font-face {
  font-family: myFonts;
  src: url("sample-font.eot");/*For IE*/
  src: url("sample-font.woff") format("woff"),/*For Modern browser*/
  url("sample-font.ttf") format("truetype");/*For iOS Android*/
}
body {
  font-family: myFonts;
}
フォーマット拡張子フォーマット
WOFF.woffWebページ埋め込み用フォーマット。
TrueType.ttfPC環境で一般的なフォーマット。
OpenType.ttf .otfPostscriptフォントを含むように拡張したTrueTypeフォーマット。Postscriptフォントの場合拡張子は.otfになります。
Embedded OpenType.eotMicrosoft開発のフォーマット、IEのみ対応。
SVGフォント.svg .svgzSVG(Scalable Vector Graphics)で記述したフォーマット。IEとFirefoxは未対応。
フォーマットを指定する場合の文字列
フォーマット文字列
WOFFwoff
TrueTypetruetype
OpenTypeopentype
Embedded OpenTypeembedded-opentype
SVGフォントsvg
サンプル

.ttfだけでもIE以外にはほぼ対応していると思いますが、念のため.woffとIE用に.eotも用意しました。IEに対応させるにはフォントを.eotに変換して別にアップする必要があります。フォントのフォーマットを変換するサイトはありますが、日本語フォントは容量が多いためか、時間がかかったり、変換に失敗することが多いです。アプリをインストールする手間はありますが、こちらのWOFFコンバータは.eotに変換することもできて便利です。

HTML

<p class="demo1">このサンプルデモのフォントはふい字置き場。様でダウンロードしてきたおひさまフォント(OhisamaFont) v1.1をサーバにあげてWebフォントとして使用しております。</p>
CSS

@font-face {
  font-family: font-demo1;
  src: url("OhisamaFont11.eot");/*For IE*/
  src: url("OhisamaFont11.woff") format("woff"),/*For Modern browser*/
  url("OhisamaFont11.ttf") format("truetype");/*For iOS Android*/
}
.demo1 {
  font-family: font-demo1;
  font-weight: normal;
  font-style: normal;
  font-size: 140%;
}
Result

このサンプルデモのフォントはふい字置き場。様でダウンロードしてきたおひさまフォント(OhisamaFont) v1.1をサーバにあげてWebフォントとして使用しております。


Google Fonts

Google Fontsなら簡単にWebフォントを利用することができます。Google Fontsサイトで使用したいフォントを選びます。Reviewボタンをクリックして表示されたサンプルを確認し、良かったらUSEボタンをクリック。スタイル等を選んで表示されたGoogle Fonts APIをご自身のサイトに貼り付けるだけで簡単にWebフォントを使用することができます。

Result

See the Pen mPmxKY_css3-font-face_demo2 by Webデザインラボ (@webdlab) on CodePen.


関連リンク

手書き風でいい感じなフォントでWebフォント
CSS3リファレンス

  • カテゴリー:CSS