結論

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

やってみた理由

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