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

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 >
        <a  target="_blank" href="#">Privacy Policy/</a>
        <a  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

CodePudding user response：

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

Some font formats aren't supported by Safari.
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

CodePudding user response：

I think this will solve your Problem:

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