menu
menu

@font-face【CSS3リファレンス】 | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook18
  • はてなブックマーク5
  • Google+3
  • Pocket0
  • Twitter0

@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
サンプルデモ

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

 .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%;
}
Google Fonts

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

サンプルデモ

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


関連リンク

 手書き風でいい感じなフォントでWebフォント

  • カテゴリー:CSS
  • facebook18
  • はてなブックマーク5
  • Google+3
  • Pocket0
  • Twitter0