menu
menu

キーワード検索

 

8月更新・前月(7月)の人気記事トップ10 - 8/1/2019

  1. ( 2 ↑) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 1 ↓) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 6 ↑) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 3 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  5. ( 7 ↑) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  6. ( 4 ↓) 【Mac】Safariでソースコードを見る方法
  7. ( 8 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  8. ( 9 ↑) 【制作Tips】画面解像度一覧表
  9. (圏外↑) 【Perl】Windows 10にActivePerlをインストール
  10. (圏外↑) 【jQuery】入門5. jQueryで日時を表示
このエントリーをはてなブックマークに追加

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

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

こんにちは(・∀・)

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") format("eot"),/*For IE*/
  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または.otfだけでもIE以外にはほぼ対応していると思いますが、念のためIE用に.eotも用意しました。.woffがある場合は.ttfや.otfよりも軽いのでそちらを使用すると遅延が軽減されますが、まだ全てのブラウザに対応されていないため初めに.woffを指定してから.ttfを指定するように設定します。最初に記述された方が採用されます。ない場合は次の指定を採用します。

.ttfまたは.otfどちらを使用しても問題ありません。

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

サンプル
HTML

<p class="demo1">このサンプルデモのフォントは(ふい字置き場。)からダウンロードしてきた(OhisamaFont11.ttf) をサーバにアップしてWebフォントとして使用してます。</p>
CSS

@font-face {
  font-family: font-demo1;
  src: url("OhisamaFont11.eot") format("eot"),/*For IE*/
  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

このサンプルデモのフォントは(ふい字置き場。)からダウンロードしてきた(OhisamaFont11.ttd)をサーバにアップして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リファレンス

  • CSS3 Webフォント
このエントリーをはてなブックマークに追加