JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="800px" height="800px">
    <defs>
        <linearGradient id="g" x1="0" y1="0" x2="1" y2="0" spreadMethod="repeat">
            <stop stop-color="black" offset="0"/>
            <stop stop-color="white" offset="1"/>
        </filter>
    </defs>
    <text id="p" x="40" y="1em" fill="red">pḾ‘</text>
    <text x="40" y="1em" fill="url(#g)">pḾ‘</text>
</svg>

Notice how the M is rendered with a different font compared to the p.

CSS

svg, text { font-size: 300px; font-style: italic; font-family: "Times New Roman"; text-decoration: underline; }

JavaScript

var b = document.getElementById("p").getBBox();
var r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
r.x.baseVal.value = b.x;
r.y.baseVal.value = b.y;
r.width.baseVal.value = b.width;
r.height.baseVal.value = b.height;
r.style.fill="none";
r.style.stroke="red";
document.getElementsByTagName("svg")[0].appendChild(r);