2017-10-20 14 views
1

J'utilise un thème wordpress qui a une sélection de type de police pour les titres de page et le corps du contenu. J'utilise Montserrat pour les titres et Open-Sans pour le body.Appliquer le type de police à une entité de symbole html spécifique (™)

J'ai quelques titres de ce produit où je dois entrer le symbole de la marque ™/™

Mais le symbole de la marque dans les titres est à venir comme une police totalement différente qui ressemble à Times New Roman.

Existe-t-il un moyen d'appliquer le type de police uniquement à l'entité de symbole html ™? Globalement?

J'ai essayé d'utiliser <sub>TM</sub> dans les titres qui fonctionne, il ne fonctionne pas partout, par exemple, il ne fonctionnerait pas dans les fils d'Ariane.

+0

Non, vous ne pouvez pas utiliser CSS sur des parties de texte (à l'exception des exceptions spéciales, telles que ': première lettre'). Vous devez l'avoir enveloppé dans son propre élément HTML, si vous voulez pouvoir lui appliquer une mise en forme CSS. – CBroe

+0

Montserrat n'a pas de glyphe pour ™, donc le navigateur doit utiliser une police différente pour le rendre. https://fonts.google.com/specimen/Montserrat Si vous avez une autre webfont dans laquelle vous aimeriez que le personnage soit affiché, sans avoir à manipuler le code HTML, alors vous devriez opter pour une solution telle que https: // stackoverflow .com/questions/11395584/fallback-fonts-on-special-characters, et ajoutez une police qui contient ce glyphe à votre pile de polices. – CBroe

+0

Je vois, cela répond à la question je suppose, merci .. –

Répondre

0

Typiquement, on utiliserait un balisage différent pour ceux-ci, puis utiliserait CSS pour générer le contenu. Par exemple, au lieu de

MyCompany&trade; 

vous pouvez utiliser

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

Et puis utilisez CSS

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

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

Oui, vous pouvez ... mais pas vraiment pratique:

@font-face Les règles ont une propriété unicode-range que vous pouvez définir pour cibler un seul caractère:

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">

Mais comme je le disais, ce n'est pas vraiment pratique, puisque vous devez en faire la première police de toutes vos déclarations font-family où vous le souhaitez appliquer ...