Why safari browser show large font size compare to other browsers like chrome

user_16509884 0
Viewed 111

When I checked on chrome its font-size look good as I have added on my CSS but when I checked on safari browser font size of privacy policy and terms of use is larger than chrome browser.

Here is my Html

     <div class="term-condition-section">
        <a class="term-condition-btn" target="_blank" href="#">Privacy Policy/</a>
        <a class="term-condition-btn" target="_blank" href="#">Terms of Use</a>
     </div>

Here is my Css

.term-condition-section {
   display: flex;
   padding: 0.25rem 0.5rem;
}

.term-condition-section .term-condition-btn {
   display: block;
   width: fit-content;
   clear: both;
   font-weight: 400;
   font-size: 10px;
   color: blue;
   text-align: inherit;
   white-space: nowrap;
   background-color: transparent;
   border: 0;
}

Please help

css html javascript
2 Answers

Without knowing your font-family, I can't actually tell whether what is the reason for this. Here are some possibilities to this problem.

  1. Some font formats aren't supported by Safari.
  2. Sometimes there may be no font-weight: 400; in your selected font-family provided and the output result may vary according to this.

So you can try disabling it by adding font-synthesis: none in the text, providing the bold version of your font or changing your font to a Web Safe Font.

To learn more about font-synthesis, please visit MDN font-synthesis page

EDIT:

Avenir Next has OTF, TTF type file format so Safari browser version 3.1 to 11.1 doesn't supports it. But however Safari browser version 12 supports it.

For more information, please visit these pages.

Browser support details for fonts

Avenir Next font details

Thanks and best regards!

user_177676190

I think this will solve your Problem:

  body {
    -webkit-text-size-adjust: none;
  }

user_143351530
Related