WEBフォントの使い方メモ

css

WEBフォントの使い方メモ

2015.3.10
Coding

フォント指定する際に調べたことの備忘録。

CSSでフォント指定をする際に、.ttc拡張子のファイルを読み込ませたのですが、正しくフォントが表示されていませんでした。※win7 chrome

例:Doesn’t work

@font-face {
   font-family: 'Cochin';
   src: url('./font/cochin.ttc') format("truetype");
}

h1{
  font-family : "Chochin";
}

理由を調べたところ、どうやらttcは複数フォントを固めたzipのようなもので、通常使うものとは違うと。

そこで下のサイトでttfに変換して、読み込ませたところ、正常に動作しました。

http://www.files-conversion.com/font-converter.php

@font-face {
   font-family: 'Cochin';
   src: url('./font/cochin.ttc') format("truetype");
}

h1{
  font-family : "Chochin";
}

 

フォントの形式について

調べていると、様々なフォントの形式があるようです。

.ttf (trutype形式)
winやmacで使う一般的な形式

.ttf, .otf (opentype形式)
adobeとmicrosoftが共同開発したフォントの形式。OSや機種の違いを問わず表示される

.woff (woff形式)
web open font format という、その名の通りwebに特化した形式。
データが軽いらしい。

.svg (svg形式)
svgを利用した形式

.eot
IEのみ利用可能な形式。使用する機会は少なそう。

これを見ると、一番パフォーマンスを出すなら、
・woffに変換する
・bodyにではなく、要素ごとにfontを当てる
という方法が一番良さそうです。

BLOG TOP