なんだか難しいようで実現して解説しているページが無いようなので、
簡単な方法を紹介します。
以下のようになります。
4pxの場合
綺麗な縁取
3pxの場合
綺麗な縁取
御託はいいから、どうやるんだよって人のために
答えから書きます（＾＾）
3pxのtest-shadowの指定は以下です
text-shadow: -3px -3px 0px #ffffff ,-2px -3px 0px #ffffff ,-1px -3px 0px #ffffff , 0px -3px 0px #ffffff , 1px -3px 0px #ffffff , 2px -3px 0px #ffffff , 3px -3px 0px #ffffff ,-3px -3px 0px #ffffff ,-3px -2px 0px #ffffff ,-3px -1px 0px #ffffff ,-3px 0px 0px #ffffff ,-3px 1px 0px #ffffff ,-3px 2px 0px #ffffff ,-3px 3px 0px #ffffff ,-3px 3px 0px #ffffff ,-2px 3px 0px #ffffff ,-1px 3px 0px #ffffff , 0px 3px 0px #ffffff , 1px 3px 0px #ffffff , 2px 3px 0px #ffffff , 3px 3px 0px #ffffff , 3px -3px 0px #ffffff , 3px -2px 0px #ffffff , 3px -1px 0px #ffffff , 3px 0px 0px #ffffff , 3px 1px 0px #ffffff , 3px 2px 0px #ffffff , 3px 3px 0px #ffffff;
みたらすぐわかると思いますが、解説してみます
縁取り幅の 最大から最小までのシャドウを四方につけるという単純なもので
解説のしようもないほど簡単です。
分解してみると
x=-3～3 y=-3
▲
x=-3 y=-3～3
▲
x=-3～3 y=3
▲
x=3 y=-3～3
▲
合体すると
▲
以上ですが、他のページでは 3ピクセルのぼかしを重ねるとかの方法で実現してるページもありますが
クリアな感じではありません。
text-strokeやsvg などを使う方法もあるみたいですが、CSSだけでないため対応ブラウザが制限されるなど制約があります。
上記の方法は完全にCSSのtext-shadowのみで実現しているためほとんどのブラウザに対応しています。
記述も -3～3までをシーケンシャルに記述すればいいのでわかりやすいと思います
ぜひご活用ください。