无法使用 sup 标签使商标符号加粗

Question

I am actually trying to make the trademark symbol bold and tried the below options. However, it is not working not sure what else i can try to make the trademark symbol bold? Any suggestions please.

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

Your code is making it bold, but the ® is so small (especially in a superscript) that it is extremely difficult to see the difference. The snippet below shows your code (first line) which indeed makes the symbol bold, and the same code without the <strong> tags (second line) to show the visual difference. Both have been enlarged.

Note that some fonts already show the ® symbol as a superscript. (eg Consolas and Calibri) Helvetica (the main font on StackOverflow) and Times New Roman (the default font in most browsers, which also applies to Stack code snippets) do not show the ® symbol as raised. The point is this: make sure the font you use doesn't already make it a superscript.

If you wish to make the symbol more bold than the bold style of your font, you would need to use a different font just for the symbol or use an 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

The way you are doing it should work. But in my case it was hardly noticeable (but definitely a small change).

You could try using css to make it bold, if the style is overridden.

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

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

Or you could use an image instead.
<p>This text contains <img src="restricted.png" alt="restricted image"> text.</p>

Just some suggestions.

Answer 3

As an alternative solution, you could use FontAwesome , which provides free and lightweight icons. See the documentation on how to use it.