Blogブログ

Tag: Coding

WEBフォントの使い方メモ

フォント指定する際に調べたことの備忘録。 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を利用した形式 […]