古（いにしえ）

text-shadowプロパティを使って、四方八方に影を落としてフチを作る方法。

.outline-text {
	text-shadow: -1px 0 dimgray, 0 1px dimgray, 1px 0 dimgray, 0 -1px dimgray,
		-1px -1px dimgray, 1px -1px dimgray, -1px 1px dimgray, 1px 1px dimgray;
}

フォントサイズが大きいとちょっと頼りないですね。

かといってフチを太くするために影の距離を大きくすると粗が目立つし、明朝体だとひどいですX(。

新（いまどき）

text-strokeプロパティで、文字の輪郭線を表示することができます。値はふたつ、線の太さと線の色を指定します。

.outline-text {
	-webkit-text-stroke: .1em dimgray;
}

ただし、デフォルトでは、文字色の手前に輪郭線が表示されている状態なので、輪郭線の太さで塗り色が潰れちゃってますね…。

輪郭線と塗り色の重なり方は、paint-orderプロパティで変更できます。正しくは、輪郭線と塗り色の描画順を変えるという感じ。 ここではpaint-order: strokeとして、先に輪郭線を描いたあとで塗りを描く、という指定の仕方になります。
が、Chromeでは効いていないみたい:(。（2020.1現在）

.outline-text {
	paint-order: stroke;
}

なので、もう一つ同じ文字を用意して、フチを付けた文字の上に、フチなしの文字を重ねるということをします。
上に重ねる文字は、data属性（ここではdata-text）に書いておいて、contentプロパティを使って、::beforeの擬似要素として表示します。これを絶対配置（position: absolute）にすることで、ふたつの文字が同じ位置に配置されるってわけ;)。

.outline-text::before {
	content: attr(data-text);
	position: absolute;
	-webkit-text-stroke: 0;
}

文章の中で使うとこんな感じになります。
data属性を使って、上に重ねる文字を絶対配置しているため、途中改行できないのが玉に瑕（きず）。なので、短いフレーズに使うのが良いです;)。

掩護（カバー）

SVGのtext要素で文字を表示させれば、SVGの機能が使えます。

<svg viewBox="0 0 82 20"><text x="1" y="16">ふくろ文字</text></svg>

SVGは文字でもパスでも、塗り色はfill、線の色はstroke、線の太さはstroke-widthで適用できます。
SVGでもデフォルトでは線が塗りの手前に重なってしまいますが、先述のtext-strokeプロパティの時と同様に、paint-orderプロパティで、重ね順を指定できます。SVGならChromeでも大丈夫な様子:)。

.outline-text text {
	fill: white;
	stroke: dimgray;
	stroke-width: 3;
	paint-order: stroke;
}

「ふ」の「ゝ」の内側^※が鋭角すぎて、角（つの）みたいに飛び出しちゃってます…。これは、stroke-miterlimitプロパティで、尖らせる角度の制限を指定することで抑えられます。

※メイリオの場合は「ろ」の最初の曲がり角。

.outline-text text {
	stroke-miterlimit: 3;
}

また、stroke-linejoinプロパティで線の角（かど）を丸めれば、柔らかい感じのふくろになります。角丸にしておけば、角（つの）が飛び出ることもなくて安心:)。もちろん明朝体も綺麗です。

.outline-text text {
	stroke-linejoin: round;
}

文章の中で使うとになります。
文字数と相談しながらsvg要素のサイズや、text要素の位置をいちいち調整しなきゃならないので、あまり実用的ではないですけれど、表示するサイズがきっちり決まっているタイトルなどでなら使えそう。:ω