Web フォント とは?

公開日: : CSS, WEBフォント

WEBフォントとは?

意図するフォントを表示する技術

Webブラウザは端末にインストールされているフォントを呼び出し文字を表示します。

Windowsにインストールされている主な日本語フォント

  • メイリオ
  • Osaka
  • MS Pゴシック
  • MSゴシック
  • MS P明朝

Macにインストールされている主な日本語フォント

  • ヒラギノ角ゴ Pro
  • ヒラギノ明朝 Pro
  • Osaka-mono

WindowsとMacを比べても標準では共通するフォントがなく、
表示環境によって誤差があり、デザインが崩れたりするということがよくあります。

CSS3 からWebサーバー上にフォントファイルを置き、意図するフォントを
表示できるようになりました。その技術がWebフォントです。

@font-faceのCSSへの記述

Webフォントを表示するには、CSS内に@font-faceで指定します。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-faceルールはいろんな構文が研究されているみたいですが、正直よくわかりません。特に?#iefix 部分は、IE6-IE8 以下で複数のフォントを指定するとエラーが起きるらしいのをこう書くことによってなくしているらしいです。

以下のサイトを参考にしました。

参考サイト:
WEBCRE8.jp
Using @font-face

Web フォントを使用できるフォーマット

拡張子 format()の値
.ttf truetype
.ttf .otf opentype
.woff woff
.eot embedded-opentype
.svg .svgz svg

.woff は「Web Open Font Format」の略で、Webフォントの表示に用いることを想定して開発されたものです。圧縮されていて軽いのと、独自のヘッダ情報やXML形式のメタデータ(著作権情報など)を付加した形式となっています。
.svgz は .svg ファイルをGZIP圧縮したファイルです。

@font-faceのディスクリプタ

ディスクリプタ 用途・値
font-family 任意のフォントファミリ名
src フォントファイル url() local() フォント形式 format()
font-style 文字スタイル normal italic oblique
font-weight 太さ normal bold 100 200 300 400(normalに相当) 500 600 700(boldに相当) 800 900
font-stretch 幅 ultra-condensed extra-condensed condensed emi-condensed normal semi-expanded expanded extra-expanded ultra-expanded
unicode-range 使用する文字範囲 Unicodeのコードポイント
font-variant スモールキャップス normal small-caps
font-feature-settings OpenTypeフォントの字形 Featureタグ名

アニメのフリーフォントを Web フォントにしてみる

Webフォントを試すために、アニメのフリーフォントをいくつかダウンロードしてみました。

「進撃の巨人」フォント

TVアニメ『進撃の巨人』第二期 OPで使用されている書体を真似て作ったフォント
自由の翼 フォント
ダウンロードサイト:自由の翼フォント
(漢字・ひらがな・カタカナ・英数字)

「銀魂」フォント

アニメ銀魂で次回予告に使われていた文字をフォント化
銀魂 フォント
ダウンロードサイト:銀魂 次回予告体(大甘書道体)
(漢字・ひらがな・カタカナ・英数字)

「あの日見た花の名前を僕達はまだ知らない。」フォント

めんまの直筆文字をフォント
めんま フォント
ダウンロードサイト:めんまフォント
(ひらがな・数字)

「デスノート」フォント

デスノート フォント
ダウンロードサイト:DEATHNOTE Font
(英数字)

自由の翼フォントをWebフォントで読み込む

「進撃の巨人」を例に見ていきます。

.ttfファイルをダウンロードして、サーバのfontsフォルダーの中サーバに置いて、
CSSに以下のように記述します。

@font-face {
  font-family: 'JiyunoTsubasa';
  src: url('./fonts/JiyunoTsubasa.ttf') format('truetype');
}
#JiyunoTsubasa {
  font-family: 'JiyunoTsubasa';
}

DEMO を見る

.ttf だけなので、IEなどでは表示出来きてないと思います。

.ttf フォントを.eot .woff .svg にコンバートする必要があります。

フリーのおすすめフォントコンバーター

  • .ttf →.eot おすすめコンバーター
    ブラウザ上で.ttf を.eot にコンバートしてくれるWebサービス
    ttf2eot
  • .ttf →.ttf .eot .woff .svg おすすめコンバーター
    ブラウザ上で一括で.ttf .eot .woff .svg にコンバートしてくれるWebサービス
    @font-face Generator
    font-face-generator
  • .ttf →.woff .eot おすすめコンバーター
    .ttf を.woff .eot に一括コンバートしてくれるソフト
    WOFFコンバータ – 武蔵システム

コンバートしたらそれらもサーバにアップして、CSSを複数指定にします。

@font-face {
  font-family: 'JiyunoTsubasa';
  src: url('./fonts/JiyunoTsubasa.eot'); /* IE9 Compat Modes */
  src: url('./fonts/JiyunoTsubasa.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/JiyunoTsubasa.woff') format('woff'), /* Modern Browsers */
       url('./fonts/JiyunoTsubasa.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('./fonts/JiyunoTsubasa.svg#JiyunoTsubasa') format('svg'); /* Legacy iOS */
}

上記のコンバータを利用して、.eot .woff はすべて問題なく出来ました。

DEMO を見る

「デスノート」のフォントは英数字だけなので、.svgも変換できました。

「めんまフォント」はひらがなと数字だけだったので、
font-face-generatorで.svgも変換できました。(@font-face Generatorではダメでした。)

「銀魂」と「進撃の巨人」は漢字が入っているせいで容量オーバーなのか、
上記のコンバータでは .svg 変換できませんでした。

WEBフォントの SVG ファイルは必要か?

今回 SVG の日本語対応のおすすめコンバーターは見つかりませんでした。

SVG が必要な環境はiOS2.2以下のみなはずで、.ttf .eot .woff の3種で、
ほとんどの環境は網羅出来てるんじゃないかと思われます。

アップルが2014年3月に発表したiOS のシェア数では、
iOS 5以前を使っているのは 1.44% で、約90% が iOS 7 になっているようです。

The Apache™ Batik Project の SVG Font Converter で、
もしかしたらSVG を変換 出来るんじゃないかとも思いますが、試していません。

関連記事

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

ビューポートの単位 vw, vh, vmin, vmax CSS で大きさを指定する時、px や

記事を読む

CSS 吹き出し

CSS 三角で吹き出しを作る

吹き出しとか三角とかよく使うのに、いちいち調べてどれ使おうかといつもやっていたので、まとめて作ってお

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ(add_filter版)

前回、「WordPress の PHP をちょっと見てみよう Ⅲ」でフックをやったので、カレンダーで

記事を読む

画像からSVGを作る

Web アイコンフォント 作り方

SVG が欠かせないものとして、最近よく使われているのは、アイコンフォントです。 アイコンフォント

記事を読む

CSS セレクタ

【CSS セレクタ】その1:アスタリスクや属性セレクタとか

CSS3も浸透してきて、細かい所が危うくなってきたので、セレクタを中心に少しおさらいしようかと思いま

記事を読む

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる

記事を読む

繰り返し背景を全面表示してアニメーションする

繰り返し背景を全面表示してアニメーションする

前回の「背景を SVG で全面表示し、パターン化をアニメーションさせる」がSVGの要素を全て対応して

記事を読む

CSS セレクタ

【CSS セレクタ】その2:擬似クラスセレクタやラジオボタンチェックでフォームの有効無効や枠の色変えたいとか

<今回のピックアップ項目> :link :visited :hover :active :t

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ

WordPressでカレンダーの表示部分をいじってみようかと思います。 どうやら、カレンダー関

記事を読む

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

Google Earth が出来た時も、Google ストリートビューが出来た時も、 Google

記事を読む

CSS WEBフォント

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラーの状態 WordPress 管理画面のテキ

wordpress タイトルの変更
WordPress タイトルの変更

テンプレートタグ the_title(); get_the_title

All-in-One WP Migration で サーバ移動
「All-in-One WP Migration」プラグインで 簡単に WordPress のサーバー移行する手順メモ

1.移行元サイトでのデータエクスポート 「All-in-One WP

DNSサーバーとは
ドメインとは?DNSサーバーとは?

ドメインとは? ドメインとは? ドメインとは、インターネット上のネ

javascriptで複数同じ名前のformの値を取得する
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHT

→もっと見る

    • 202411
      Mon Tue Wed Thu Fri Sat Sun
      123
      45678910
      11121314151617
      18192021222324
      252627282930
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑