Question

我有两个字体文件集可供使用，一个是OTF格式，另一个是WOFF格式。不幸的是，其中一个似乎在不同的操作系统中呈现不同，导致我的布局中出现对齐问题。以下代码和捕获说明了问题：

CSS：

div { float:left; padding:0; margin:0 10px; color:#fff; font-size:25px; }
.galano { background-color:#1a2; font-family: 'Galano Grotesque'; }
.coves  { background-color:#21a; font-family: 'Coves'; }

HTML：

<body>
    <div class="galano">padding:0</div>
    <div class="coves" >padding:0</div>
</body>

从操作系统1中捕获：

从操作系统2中捕获：

请注意具有绿色背景的字体似乎包含一个大的内部填充，使元素大大高于它需要的值。通过考虑使用不同字体对齐元素时的额外空间，我可以忍受这一点，但不幸的是，文本在其边界框内的位置在不同的操作系统中是不同的，因此我的调整必须特定于每个操作系统。

如果可能的话，我希望避免的一个选项是条件CSS，无论哪种方式，所以我的问题是：我可以使用任何CSS属性来忽略字体的内在填充（使边界框仅足够高以包含可见的字形那么我可以在操作系统中一致地应用我自己的填充？

谢谢！

Answer 1

可能更多的是浏览器内容而不是操作系统。你是否规范了线高？ E.g。

div {
  float: left;
  padding: 0;
  margin: 0 10px;
  color: #fff;
  font-size: 25px;
  /* Over here! */
  line-height: 1.2;
}

如何在css

1 个答案: