占ツクCSS辞典2【全体公開】

フォントの詳細4 ページ7

.


Androidで


Androidではフォント指定ができないとお話しましたが、Webフォントをうまく使えば変えることは不可能ではありません。

以前の説明では拡張子がwoffのファイルが使いやすいと書きましたが、Androidの多くのブラウザではttfという形式しか使えません。

なので、@font-faceを記述するときにwoffとttfの二つのファイルへのURLを書きます。
ただ、ttfはwoffより大きいので使うならサブセット化を推奨します。
通信制限も遅らせられますし。

例)
@font-face{
font-family:フォント名;
src: url(http://うｒｌ.woff),
url(http://うｒｌ.ttf);
}
*{font-family:フォント名 !important;}



woff? ttf?


さっきからwoffやらttfやら出てきたが何のこっちゃと思う方もいると思います。
例えば画像でも、ファイル名のあとに.jpgとか.pngとかついてるときないですか？
それのフォントver.です。

woffとttfではファイルの大きさが全然違います。
woffで開いたときは遅いと感じくなくても、ttfで開いたときは表示が遅いと感じることがあると思います。
特にスマホは通信量に制限があるので、あまり大きいファイルを使わない方が良いということもあります。

使う場合は、やはりサブセット化した方がいいかも…？というのが個人的な意見です。



サブセット


さっきからサブセットと見かけるけどそれ自体が何なのかわからない方が多いでしょう。
サブセット化とは、フォントファイルの使いそうな文字だけ残して、使わなさそうな難しい漢字だけ無くしてしまうということです。

収録されている文字数が減れば、当然ファイルサイズも小さくなります。
そうすることで読み込む量も抑えることができ、表示速度も通信料も幾分か改善されます。



恐らく私の説明じゃわからん！という方もいるでしょう。
いろいろな方の説明があるので、是非そちらを参考にしてみてください。

【参考】
いまさら聞けないCSS font-familyのまとめ
CSSのWebフォント指定に関する考察 2016年版
ウェブフォントの最適化
Webフォント - Creator Index
サブセット化して軽量化する方法

補足―fixed→←フォントの詳細3

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す