html - The copyright symbol (©) is appearing smaller on Mac browser

Question

The copyright symbol (©) is appearing smaller on my Mac browser. I have tried © and the ::before pseudo element but they are rendered smaller than the text surrounding it on Macs. Do I have to insert an image to make this work?

<p class="copyright-text">
  &copy;Copyright <span class="current-year"></span> (company name). All Rights Reserved
</p>

question from:https://stackoverflow.com/questions/66058221/the-copyright-symbol-copy-is-appearing-smaller-on-mac-browser

Answer 1

(NOTE: SO was giving me fits, interpreting html examples, so I had to quote them)

1. You don't tell us what font you're using; perhaps it is not installed on your Mac, and it's defaulting to a different font? Inspect and verify that it's displaying the font that you think it is.

2. Try changing the font of the copyright symbol to a fixed-width or type safe font; like Georgia, Consolas, or Verdana, like so:

// Style
copyright { font-family: Georgia, Consolas, Verdana }

<span class="copyright">&copy;</span>

? Copyright 2021, Amalgamated Bipartisan Conglomerates

<p class="copyright-text">
    <span style="font-family: Georgia, Consolas, Verdana">&copy;</span>Copyright <span class="current-year"></span> (company name). All Rights Reserved
</p>

3. If you set your character set to UTF-8, you can also try just using the symbol itself (not the ©) like so:

meta charset="UTF-8">
span class="copyright">?</span>

<p class="copyright-text">
    <span style="font-family: Georgia, Consolas, Verdana">?</span>Copyright <span class="current-year"></span> (company name). All Rights Reserved
</p>

? Copyright 2021, Amalgamated Bipartisan Conglomerates