Result

SVG等を使わず、純粋にCSSだけで白抜き文字を作る、みたいなやつ

縁取りだけならtext-shadowやtext-strokeで済みますが上のデモのような白抜き文字だとSVGが主流になっていると思います

SVGが使えないケースはblend-modeより少ないと思いますが選択肢があると良いなという事で

メリットはコード書くのが楽、デメリットはblend-modeな点でしょうか

css

.label {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 8px 25px;
	border-radius: 35px;
	font-size:2.5rem;
	font-weight: bold;
}

.label.style {
	background: #fff;
	color: #000;
	mix-blend-mode: screen;
}

逆に黒背景等で文字をくり抜くならmix-blend-mode: multiply;にして文字色をホワイトにすると良いと思います

いずれにしてもSVGほど応用は効きません

html

  <div class="parent">
    <div class="label style">サンプルです</div>
    <img src="foo.jpg">
  </div>
  </div>

コードが少なく済む分、パフォーマンスは少し良くなるかも。
※ベンチマークとったわけではないので適当に聞き流してください

can i use

blend-modeのブラウザ対応状況です。IE無視でいいならSVGでもblend-modeでも良いかもしれない。

via

Blending Modes in CSS