CSSで欧文フォントセットを作ると容量がわずかに軽くなる可能性について考えてみた

結論

容量は軽くなるかもしれませんが、実現できる可能性が限りなく低いです。

やってみた理由

Webフォントをttfファイル等の代わりにCSSで表現できれば、もっと軽量にできる可能性がある…かも?、と思ったので検証してみました。

実装

コーディングした内容

PhpStormのHTML5 Boilerplateで生成されたものから、index.htmlとmain.cssを変更しています。

HTML

index.html(body以下)

<div class="container">
    <div class="relative">
        <div class="text-large-a">A</div>
        <div class="css-large-a">
            <span class="css-large-a-sub-bar"></span>
            <span class="css-large-a-sub-top"></span>
            <span class="css-large-a-sub-left-under-left"></span>
            <span class="css-large-a-sub-left-under-right"></span>
            <span class="css-large-a-sub-right-under"></span>
        </div>
    </div>
</div>

CSS

main.css

.container {
    width: 960px;
    margin: 0 auto;
    padding: 100px;
}

.flex {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.relative {
    position: relative;
}

.css-large-a {
    position: absolute;
    top: 145px;
    left: 230px;
}
.css-large-a::before,
.css-large-a::after {
    display: block;
    content: '';
    width: 13px;
    height: 165px;
    background-color: #333333;
    position: absolute;
    top: -90px;
}
.css-large-a::before {
    transform: rotate(22deg);
    left: 10px;
}
.css-large-a::after {
    transform: rotate(-22deg);
    right: -90px;
}
.css-large-a-sub-top {
    width: 16px;
    height: 10px;
    margin: 0 auto;
    background: #333333;
    position: absolute;
    top: -87px;
    right: -58px;
}

.css-large-a-sub-bar {
    display: block;
    width: 90px;
    height: 13px;
    border-radius: 100px;
    background-color: #333333;
    position: absolute;
    top: 11px;
    right: -95px;
}

.text-large-a {
    color: #333333;
    font-size: 200px;
}

表示

左がテキスト（200pxの）半角A、右がCSSで表現した半角Aです。

改善できる箇所

赤丸の部分については時間がかかりそうだったので省略しました。

本題：ファイル容量について

CSSで欧文フォントを表現するために必要なバイト数

ここまでの大文字Aに必要なCSSは679バイトでした。上記の赤丸の部分を.css-large-a-sub-barの1.5倍程度で記述できるとすると、1文字にかかる容量は約2KBになります。圧縮すると 2KB/Char から 551Byte/Char まで削減できました。

欧文フォント（ローマ字＋各種記号）を全て作るとすると、219種類？になると思います。参考：欧文フォント キャラクタコード表

それぞれのCSS記述量の平均値が550Byteだとすると、欧文フォントを作成する際に必要な容量は 550Byte/Char * 219Char = 120,450Byte = 約120KB となります。

実際のttfファイルの容量

GoogleのNotoSans-Regular.ttfファイルは208KB。計算上はわずかにCSSで表現された文字の方が軽くなりました。

CSSでフォントセットを実現できる可能性について

フォントサイズ問題

今回作ったCSSではフォントサイズを変更できません。外側のdiv(上記では.css-large-a)に対する相対値で書くことができれば、フォントサイズを変更することも可能になります。ですが、相対値で書いたとしても、少しのズレもなく大きさが可変になる、ということが実現できるかはわかりません。

日本語問題

日本語をCSSで再現することはかなり難しいです。

クラス指定問題

そもそもCSSの仕組みとして、クラスを指定しなければ文字が出ない、ということになりますが、もちろん1文字1文字クラスを指定する暇なんてありません。

SEO問題

現時点では、クローラーがCSSを読んでいたとしても、そのCSSが大文字のAを表している、ということを理解できないでしょう。

検証結果

計算上だけでも容量が軽くなる可能性があるのは意外でした。とはいえ上記のように、多々問題があり実現は難しそうです。

参考サイト

欧文フォント キャラクターコード表
Google Noto Fonts