名古屋市のフロントエンドエンジニアがWEB制作に関する技術メモを書いています

メニュー

フォントってなんだろう?

最終更新日:

公開日:2018年04月13日

その他

どうも、くーへいです。

WEBフォントが普及して久しいですが、場合によってはフォントを使うだけでなく作るケースも増えてきているのではないでしょうか?
作る、と言っても簡易なWEBサービスがありますから、フォントについて詳しく知らなくても生成できる環境は整ってきています。
しかし、何か凝ったことをしたり、トラブルに見舞われた際、やはりフォントの基礎を知っていることで迅速に対応できるかもしれません。
そこで、大変ニッチな知識ではあると思うのですが、そもそもフォントってなに?ということから勉強していきたいと思います。

そもそもフォントってなに?

とっても基本的なところからスタートです。

そもそもフォントって何でしょうか?
これは難しく考えずに、書体データと思えばよいと思います。
書体データとは、ある文字がどのような形をしているのかを格納したデータを指しています。
コンピューターは、「あ」を表示してくれ!と人間から命令されても、その姿かたちを知らなければ表示することができないのです。
その「文字はどういう姿かたちをしているのか」をまとめたものがフォントと言えます。

フォントと一口に言っても、たくさんの種類がある

ここからがややこしい話です。

人間には「あ」は「あ」でしかありません。
ですが、コンピューターではいろいろな形やデータを持った「あ」が必要になるケースがあります。

毛筆で書いたような「あ」が欲しい、もっと太い「あ」が欲しい、もっと「あ」を大きくしたい・・・

もっと多種多様な要望が出るのでしょうが、少し考えただけでも数種類の「あ」が必要になりそうです。
こういった要望に応えるものがフォントという仕組みでもあります。

種類の分け方の切り口として、等幅フォントとプロポーショナルフォントというものもあります。
これは、1文字の幅が必ず同じなのか、文字よって最適な幅になっているのか、という違いがあります。
文字幅が同じであれば、何文字打てばどの程度の幅になるのかがある程度予想がつきますし、罫線(└など)を表現する際もずれにくくなります。
一方で、文字よって幅を変えることで美しさを優先したものがプロポーショナルフォントです。

また、「あ」というものはこういう形です、というものを記録しているのがフォントなのですが、どうやって記録するのかによっても種類が変わってきます。

ビットマップフォント

フォントをドットで表現する形式です。
ドットで扱うことで容量を節約し、表示が高速になります。

しかし、拡大するとギザギザが目立つため、特にWEBではあまり使われません。

印刷業界では小さい文字を表現するために、スケーラブルフォントではつぶれてしまう文字を最適化して表示するために使用される場合があります。

スケーラブルフォント

ビットマップフォントと異なり、線の位置や形、長さなどで文字を表現します。
拡大しても崩れることがありません。
スケーラブルフォントの中でもストロークフォントとアウトラインフォントに分かれます。

ストロークフォントは文字の中心線の情報だけを保持しており、容量が軽いのが特徴です。
アウトラインフォントは文字の輪郭を情報として保持しており、最近の大抵のフォントはアウトラインフォントです。

データの形式

フォントはデータの形式によっても分類されます。
データの形式によって表示できるソフトやOSが変わるため、把握しておいても損はないと思います。

TrueTypeフォント

Appleが開発したフォントで、現在ではWindowsとMacの両方で使用可能です。
拡張子は「.TTF」と「.TTC」が使われています。
TTFをまとめたものがTTCになります。

広く普及しているフォントの形式で、近年のデバイスであればこの形式を読み込めないことはないと思われます。

WindowsとMacで使用することは可能ですが、同じフォントを双方のOSで読むことはできません。
Windows用はWindows用、Mac用はMac用とファイルから分かれています。

OpenTypeフォント

MicrosoftおよびAdobe Systemsにより開発された、TrueTypeフォントの拡張版のフォントです。
拡張子はTrueTypeと同様の「.TTF」と「.TTC」に加え、「.OTF」「.OTC」が使われます。

TrueTypeと異なり、1つのファイルでWindows、Mac両方に対応が可能です。

また、含むことのできる文字数にも差があり、OpenTypeの方がはるかに多くの文字を含むことができます。

EOTフォント

Embedded OpenType fontsのことで、Embeddedとは、埋め込み可能であることを指します。
主にWeb用に策定された規格ですが、InternetExplorerのみでしか使用できません。
ただし、InternetExplorerであれば、IE6でも使用可能です。

WOFFフォント

Web Open Font Formatの略で、Mozillaが主となって開発された、Web向けのフォント形式です。
フォントデータを圧縮することで帯域の使用を抑えることができます。

WOFFにはWOFF2と呼ばれる規格も存在し、こちらは圧縮のアルゴリズムが異なります。

EOTフォントと異なり、大抵のブラウザで読み込むことができます。(IEは8以下は非対応)

SVGフォント

SVGは画像の規格で、スケーラブルフォントのように、拡大縮小しても崩れることがない画像です。
その規格をフォントに流用したのがSVGフォントです。

このSVGフォントに関しては、現在サポートするブラウザが減少してきており、広く普及することはないでしょう。

まとめ

一口に「フォント」と言っても多くの形式があるのがわかりますね。

今まではPCにインストールして使用する形式が多かったのですが、Webの普及に従って、Web用フォントが増えてきた形です。
もちろん、これらは自分たちで作成することもできますので、一度試してみても良いかもしれません。

関連記事

Twitterにて更新情報などを配信しています

スポンサードリンク