結論
容量は軽くなるかもしれませんが、実現できる可能性が限りなく低いです。
やってみた理由
Webフォントをttfファイル等の代わりにCSSで表現できれば、もっと軽量にできる可能性がある…かも?、と思ったので検証してみました。
実装
コーディングした内容
PhpStormのHTML5 Boilerplateで生成されたものから、index.htmlとmain.cssを変更しています。
HTML
<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
.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を表している、ということを理解できないでしょう。
検証結果
計算上だけでも容量が軽くなる可能性があるのは意外でした。とはいえ上記のように、多々問題があり実現は難しそうです。