Css：字体在不同浏览器上有不同的顶部/底部间距

Question

我得到了 Venner 字体，它在不同的浏览器/操作系统中具有不同的顶部/底部间距。 字体大小为rem，行高：1。我用的是normalize.css；边距和填充均为 0；

特别是当我尝试垂直对齐按钮中的文本时，可以看到不同顶部/底部间距的问题。文本未垂直对齐。

这只是字体本身的问题，还是有解决方案使文本在所有浏览器中具有相同的顶部/底部间距？

<a href="#" class="red-border-button "><span>Veneer font</span></a>

.red-border-button{
  font-family: 'veneer', sans-serif;
  font-weight: 400;
  font-size: 3rem;
  line-height: 1;
  position: relative;
  color: red;
  padding: 2rem 3rem;
  box-sizing: border-box;
  text-decoration: none;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

我的目标是在所有浏览器上获得相同的字体外观。

Answer 1

您面临的问题可能是由于不同的浏览器和操作系统呈现 Venner 字体的方式造成的，这可能会导致顶部/底部间距不同。这是自定义字体的常见问题，不一定是字体本身的问题。

要实现跨浏览器的文本对齐一致，您可以尝试以下操作：

1. 使用特定于字体的重置：您可以专门为 Venner 字体创建自定义重置，而不是仅仅依赖 normalize.css。这可能涉及调整行高、填充或其他属性以确保一致的渲染。

2. 手动调整行高：尝试不同的行高值，直到找到一个可以在不同浏览器中提供所需垂直对齐的值。

3. 考虑使用不同的字体显示属性：

   font-display

   属性可以影响字体最初的呈现方式。尝试不同的值（例如，

   font-display: swap;

   ）看看是否可以提高一致性。

4. 使用网络安全的后备字体：除了 Venner 字体之外，请考虑在字体系列声明中提供网络安全的后备字体（例如 Arial、Times New Roman）。这可以帮助确保一致的外观，以防 Venner 字体不可用或无法正确渲染。