Impossible de rendre le symbole de la marque en gras à l'aide des balises sup.

Question

J'essaie en fait de rendre le symbole de la marque en gras et j'ai essayé les options suivantes. Cependant, cela ne fonctionne pas. Je ne suis pas sûr de ce que je peux essayer d'autre pour rendre le symbole de la marque en gras. N'hésitez pas à me faire des suggestions.

Option 1  : <p>This text contains <strong><sup>&#174;</sup></strong> text.</p>
Option 2  : <p>This text contains <b><sup>&#174;</sup></b> text.</p>

Answer 1

Votre code es en le rendant gras, mais le ® est si petit (surtout dans un exposant) qu'il est extrêmement difficile de voir la différence. L'extrait ci-dessous montre votre code (première ligne) qui rend effectivement le symbole en gras, et le même code sans l'attribut <strong> (deuxième ligne) pour montrer la différence visuelle. Les deux ont été agrandies.

Notez que certaines polices affichent déjà le symbole ® en exposant. (par exemple Consolas et Calibri) Helvetica (la police principale sur StackOverflow) et Times New Roman (la police par défaut dans la plupart des navigateurs, ce qui s'applique également aux extraits de code Stack) ne montrent pas le symbole ® en exposant. Le point est le suivant : assurez-vous que la police que vous utilisez ne fait pas déjà du symbole ® un exposant.

Si vous souhaitez que le symbole soit plus gras que le style gras de votre police, vous devez utiliser une police différente pour le symbole ou utiliser une image.

<p style="font-size:200%">This text contains <strong><sup>&reg;</sup></strong> text.</p>
<p style="font-size:200%">This text contains <sup>&reg;</sup> text.</p>

Answer 2

La façon dont vous le faites devrait fonctionner. Mais dans mon cas, c'est à peine perceptible (mais c'est un petit changement).

Vous pouvez essayer d'utiliser du css pour le mettre en gras, si le style est surchargé.

-- HTML
<p>This text contains <span class="bold-text"><sup>&#174;</sup></span> text.</p>

-- CSS
.bold-text {
    font-weight: bold !important;
}

Ou vous pouvez utiliser une image à la place.
<p>This text contains <img src="restricted.png" alt="restricted image"> text.</p>

Juste quelques suggestions.

Answer 3

Comme solution alternative, vous pouvez utiliser FontAwesome qui fournit des icônes gratuites et légères. Voir le documentation sur la façon de l'utiliser.