Schrifttyp auf bestimmte HTML-Symbolentität anwenden (™)

Ich verwende ein WordPress-Theme, das eine Schriftartauswahl für Seitentitel und Inhaltskörper hat. Ich verwende Montserrat für Titel und Open-Sans für Text.

Ich habe ein paar Produkttitel, bei denen ich das Markensymbol ™ / eingeben muss. ™

Aber das Markensymbol in den Titeln erscheint als eine völlig andere Schriftart, die wie Times New Roman aussieht.

Gibt es eine Möglichkeit, Schriftarten nur auf die ™ Marke HTML-Symbol Entität? Global?

Ich habe versucht zu verwenden <sub>TM</sub> in Titeln, welche Art von Arbeit, es funktioniert nicht überall, zum Beispiel würde es nicht in Breadcrumbs funktionieren.

Ja, das kannst du … aber es ist nicht wirklich bequem:

@font-face Regeln haben ein unicode-range Eigenschaft, die Sie festlegen könnten, um auf ein einzelnes Zeichen abzuzielen:

c.onchange = e=> document.body.classList.toggle('amp');

@font-face {
  font-family: 'Ampersand';
  src: local('Courier');
  unicode-range: U+26;
}

body.amp{
  font-family: Ampersand, cursive;
  }
body{
  font-family: cursive;
  }

<span>lorem ipsum dolor sit amer &amp; some others</span>
<input type="checkbox" id="c">

Aber wie gesagt, es ist nicht wirklich bequem, da Sie es zur ersten Schriftart aller Ihrer Schriftfamiliendeklarationen machen müssen, wo Sie es anwenden möchten …

Typischerweise würde man dafür ein anderes Markup verwenden und dann CSS verwenden, um den Inhalt zu generieren. Zum Beispiel statt

MyCompany™

Sie könnten verwenden

MyCompany<i class="symbol symbol-tm" />

Und dann CSS verwenden

i.symbol {
    position: relative;
    width: 1.5em;
}

i.symbol.symbol-tm:after {
    display: inline;
    content: "\2122";
    font-family: "Times New Roman";
}

Ich verwende die styledComponents-Bibliothek ein gutes Stück und wollte daher in meinem Anwendungsfall eine globale gestylte Komponente erstellen, die ich überall in meinen Code einfügen könnte, was mich zu der folgenden Lösung führte:

export const Trademark = styled.span`
    ::before {
        display: inline;
        content: "\u2122";
        /* font-family: [your font family here] */
    }
`;

Das heißt, ich kann es überall mit anrufen <Trademark />