Transparent text cut out of background

Question

Is there any way to make a transparent text cut out of a background effect like the one in the following image, with CSS?
It would be sad to lose all pr

Answer 1

You can use an inverted / negative / reverse font and apply it with the font-face="…" CSS rule. You might have to play with letter spacing to avoid small white gaps between letters.

If you do not require a specific font, it's simple. Download a likeable one, for example from this collection of inverted fonts.

If you require a specific font (say, "Open Sans"), it's difficult. You have to convert your existing font into an inverted version. This is possible manually with Font Creator, FontForge etc., but of course we want an automated solution. I could not find instructions for that yet, but some hints:

• How to convert a bitmap font into a TrueType font (plus yet another way to do that). One would first use ImageMagick commands to render the font glyphs into high-resolution raster images and to invert them, then convert them back to a TrueType font with the above instructions.
• Is it possible to invert a font with FontForge or another PGM?
• Creating a reverse (white on black) font