为什么safari浏览器显示的字体大小比其他浏览器(如chrome )更大

Question

当我检查chrome时，它的字体大小就像我在CSS上添加的一样好看，但当我检查safari浏览器时，、隐私政策、和的字体大小、使用条款都比chrome浏览器大。

这是我的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>

这是我的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;
}

请帮帮忙

Answer 1

我认为这能解决你的问题：

​

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

​

Answer 2

如果不知道您的font-family，我就不知道是什么原因造成了这种情况。以下是解决这个问题的一些可能性。

1. Safari不支持某些字体格式。
2. 有时，在所选的font-weight: 400;中可能没有提供任何font-family，并且输出结果可能会因此而有所不同。

因此，您可以通过在文本中添加font-synthesis: none、提供字体的粗体版本或将字体更改为Web安全字体来禁用它。

要了解更多关于font-synthesis的信息，请访问MDN字体合成页面

编辑：

Avenir有OTF，TTF类型的文件格式，因此Safari浏览器版本3.1至11.1不支持它。但是Safari浏览器版本12支持它。

欲了解更多信息，请访问这些页面。

浏览器支持字体的详细信息

下一个字体细节

谢谢并致以最良好的问候！