CODEWITHSUNDEEP
javascripthtmlcss
Darshan Thakor
Darshan Thakor

Reputation: 171

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

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

Upvotes: 3

Views: 1375

Answers (2)

Vishal Kalansooriya
Vishal Kalansooriya

Reputation: 520

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!

Upvotes: 2

Yalcin Kilic
Yalcin Kilic

Reputation: 800

I think this will solve your Problem:

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

Upvotes: 1

Related Questions