span background does not match the way browser renders

[axeleroy]

Bug report

Description / Observed Behavior

I'm trying to build an image with a "highlight" using span and a background on it. Unfortunately, it is not rendered as it should (see Expected Behavior)

Expected Behavior

I'm expecting the span to render like this:

JS Bin

Reproduction

https://og-playground.vercel.app/?share=jVTLbtswEPwVYoveXFty7SIR3AJuU7UF2pOL5uILJa4lJhQpUFQU1_C_R6vECGLrNTeSM-Ry9nGA2AiEAFZCPmw1O0Ph9go_Hw6XJ4SIx_eJNaUW34wyNmBbePdpEWGEW5i0S1KUSeqI6Xve-05aJYVLB1lCFrnie-LtFD7WvAvKpfB4fLv35ZLS7gWh3w8CBfLDmipgfkfU7ZF3c9tc9vmcz6M47hVyJRP9y2FWkCZG7dB2Cs5tIbRYQ1ilfvejww4RxrnUMI12Ic-kasy6wTv-r2Qbrgv2x2jT-_-T_Pal5paeN4K9kf-Rnvo4XWI2eL_DR7cmn0dYfIKSGn--9sF0MagwD2h3ylS3luekiSzy-w-VsaJX2pZTQkdeCasi57o_mHEZJsSnevXX8_X8axgOfpTwWu9NqYdeeBWG19ejtDkXQuqEhB7zpks7IoVdLhF6nCL8NvUDTOZFmbGN1OyGPszWGTrGtehxeUY2d7XXLPXbhtKsnkpn-897MAGTO2l0AcEBmtEJwVVd7PA8bSFY0EJgVCYQ7LgqcAKYmTv5d5_T7HdVs6rvoQb4nkUoIHC2xOMEHI9qRoqqLj9jlYDjEw

[Jackie1210]

set embed font to false

[axeleroy]

The issue isn't in the way the font is rendered (I did not bother to use the same font in my screenshot of the expected behavior) but the way the span is rendered around the text.