如何忽略字体'；css中的内部填充

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

CSS:

HTML:

填充：0
填充：0

从操作系统1捕获：

从操作系统2捕获：

请注意，绿色背景的字体似乎包含一个较大的内部填充，使元素比需要的高度高得多。在使用不同字体对齐元素时，我可以考虑额外的空间，但不幸的是，在不同的操作系统中，文本在其边界框中的位置不同，因此我的调整必须针对每个操作系统

如果可能的话，我希望避免的一个选项是通过任何方式使用条件CSS，因此我的问题是：我是否可以使用任何CSS属性来忽略字体的内部填充（使边界框的高度仅足以包含可见的标志符号），这样我就可以在操作系统中一致地应用自己的填充

---

谢谢

可能更像是浏览器不兼容，而不是操作系统不兼容。你把线的高度标准化了吗？例如

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

---

可能是浏览器不兼容，而不是操作系统不兼容。你把线的高度标准化了吗？例如

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

---

这种字体是从哪里来的，是如何产生的？您是否在不同的浏览器和操作系统中加载不同的格式（WOFF2、WOFF、TTF、SVG、EOT？）？如果这是一个选项，告诉字体设计师有一个巨大的问题…嗯，好问题。不确定填充，但您可能希望使用

字母间距：

谢谢@FelipeAls来使用字母间距。我不知道字体是从哪里来的，是一本小册子的设计师给我的，但我不认为是他设计了他使用的字体。我曾尝试在Chrome、FF、IE 11和Safari for Windows、Chrome和Safari for Mac以及android默认浏览器中仅使用OTF或WOFF文件。结果似乎与操作系统相关，而与浏览器相关。您好@Roysh，谢谢您的建议。你是说行高吗？不是。有一个css命令叫做

字母间距
。例如，
.coves{letter spacing:1px；}
尝试修改像素量，看看它是如何工作的。字体来自哪里，是如何生成的？您是否在不同的浏览器和操作系统中加载不同的格式（WOFF2、WOFF、TTF、SVG、EOT？）？如果这是一个选项，告诉字体设计师有一个巨大的问题…嗯，好问题。不确定填充，但您可能希望使用
字母间距：
谢谢@FelipeAls来使用字母间距。我不知道字体是从哪里来的，是一本小册子的设计师给我的，但我不认为是他设计了他使用的字体。我曾尝试在Chrome、FF、IE 11和Safari for Windows、Chrome和Safari for Mac以及android默认浏览器中仅使用OTF或WOFF文件。结果似乎与操作系统相关，而与浏览器相关。您好@Roysh，谢谢您的建议。你是说行高吗？不是。有一个css命令叫做
字母间距
。例如，
.coves{字母间距：1px；}
尝试修改像素的数量，看看它是如何工作的谢谢你的宝贵想法，布拉姆。不幸的是，虽然设置行高确实允许我定义边界框的高度，但在不同的OSs中，边界框内文本的布局仍然不同；其中一个在可用区域内垂直居中绘制文本，而另一个将文本绘制得更靠近底部边缘。结果似乎与浏览器无关，但与操作系统有关（我在一个操作系统中尝试了不同的浏览器，然后在另一个操作系统中尝试了其中两个）。我想我可以手动将线条高度设置为所需的最小值，然后应用填充。维护噩梦！：-（Bram，谢谢你提出了一个有价值的想法。不幸的是，虽然设置行高确实允许我定义边界框的高度，但在不同的操作系统中，边界框内文本的布局仍然不同；一个在可用区域内垂直居中绘制文本，而另一个将文本拉近底部边缘ts似乎与浏览器无关，但与操作系统有关（我在一个操作系统中尝试了不同的浏览器，然后在另一个操作系统中尝试了两个）。我想我可以手动将行高度设置为所需的最小值，然后应用填充。维护噩梦！：-(
div {
  float: left;
  padding: 0;
  margin: 0 10px;
  color: #fff;
  font-size: 25px;
  /* Over here! */
  line-height: 1.2;
}