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
Without knowing your font-family, I can't actually tell whether what is the reason for this. Here are some possibilities to this problem.
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
Thanks and best regards!
I think this will solve your Problem:
body {
-webkit-text-size-adjust: none;
}