ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

フォントの拡張子(ttf、otf、woff、eot)について

2017年4月24日
notosans

Webフォントを使うことが多くなり、ttf、otf、woff、eotなど様々なフォントの拡張子を目にすることが増えたのですが、そもそもフォントの拡張子が違うことで何が変わるのかわからなかったので調べてみました。

ttf : True Type Font

パソコンにインストールして使うフォント
「TrueTypeフォント」は、マイクロソフト社とアップル社が2社が共同で開発したフォント形式。
WindowsやMacで使う。
■選ぶ条件
・Windowsユーザーで、かつ、フォントを買う目的が「年賀状・ワープロ・プレゼン資料」など、DTP以外のホームユース
・ビジネスユースである
・Windows・Mac問わず、Illustrator 8以前など、古いDTPアプリケーションソフトを使う必要がある

スポンサードサーチ

otf : open type font

パソコンにインストールして使うフォント
「OpenTypeフォント」は、アドビシステムズ社とマイクロソフト社の2社が共同で開発したフォント形式。
WindowsやMacで使う。
■選ぶ条件
・Mac OS Xユーザー全般(Classicアプリケーションを使う場合を除く)
・Windows・Mac問わず、Illustrator CS以降など、最近のDTPアプリケーションソフトを使っている

woff : Web Open Font Format

TrueTypeまたはOpenTypeフォントをテーブル単位で圧縮して、独自のヘッダーを追加した形式。
新しい形式のため古いWebブラウザではサポートされていません。

■メリット(いくつかあるが1つを抜粋)
フォントデータが圧縮されているため、サイトで WOFF を使用すると、無圧縮の TrueType や OpenType ファイルの使用と比べて帯域を抑えることができ、読み込み時間も短縮されます。

スポンサードサーチ

eot : Embedded OpenType

Embeddedは「埋め込み」の意味
※IE4~IE9以下対応

まとめ

上記のようなフォントの種類があって、初めて見るとちょっとややこしいように感じてしますが、ざっくり言うとttf、otfはパソコンにインストールして使うタイプのフォントで、Webその他クリエイティブ系の仕事に携わる人が購入する際はotfにするのが良い。
Woffは、ウェブフォントでありttfまたはotfデータが圧縮されているので、ブラウザでページ表示する際に読み込み時間が遅くならない。というところかと思います。

ブラウザ別のwebフォント対応について
https://thinkit.co.jp/story/2011/08/18/2233?page=0%2C1

参考サイト:
http://fontnavi.jp/zakkuri/202-truetype_opentype.aspx

関連記事

  • 【AMP】「logo」フィールドの値は必須です。「image」フィールドの値は必須です。構造化テストツールエラーの解決法2018年5月11日 【AMP】「logo」フィールドの値は必須です。「image」フィールドの値は必須です。構造化テストツールエラーの解決法
  • Webサイト制作の楽しさ!!2016年3月10日 Webサイト制作の楽しさ!!
  • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日 コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法
  • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法
  • 【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日 【css】文字(テキスト)にborderをつけるように縁取りをする方法

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.