Question

似乎所有字体都有某种嵌入式填充或边距。通过设置：

margin: 0px;
padding: 0px;

你永远不会得到你想要的东西。有谁知道这是为什么？

Answer 1

听起来你遇到的问题不是CSS而是字体本身。大多数字体定义了基线，x高度和开箱即用的行高。您的具体问题可能是字体leading，即行间距。有时这些值可能会非常不一致。如果您真的想让特定字体正确排列，我建议您查看FontLab并编辑您正在使用的特定字体的字形/基线/行高。

您还可以查看该字体的Web安全版本。这些类型的字体通常具有特定的间距，以便在网络上呈现最佳效果。情况并非总是如此，但它可能会为您提供所需的结果。查看Google的网络字体库here。

<强>更新

这个答案得到了足够的重视，我决定将下面的第一条评论添加到答案中并对其进行阐述。

浏览器重置：每个浏览器都会为许多保留的HTML标记设置默认状态，例如a和strong。默认情况下还定义了其他内容，包括字体，线高，重量和大小。这可能会影响字体的渲染。通常，这是针对特定浏览器的。因此，通过使用CSS重置，您可以消除浏览器中的默认呈现问题。 Eric Meyers Reset是一个很好的重置，但有definitely others。尝试使用不同的方法来查看最适合您的方法。

然而，CSS通过定位所有浏览器并将它们设置为全部相同来重置工作。有些人更喜欢使用某些内容，而只是针对每个浏览器的问题。那是Normalize会更好。

还存在CSS重置无法修复的问题。比如字体别名（使字体显得平滑而不是锯齿状）。由于某些浏览器和操作系统不会为字体添加抗锯齿，因此您还会看到字形宽度差异。不幸的是，这在大多数情况下是不可避免的。有些人会使用像Cufon或Sifr这样的Flash字体替换工具。这也有它自己的问题列表（例如FOUC）。

另一次更新

还有另一个问题是字距调整或字形之间的空格问题。有一个CSS属性letter-spacing，它允许你对一个文本块做一个全局kern，但是它缺乏定位像Photoshop或InDesign这样的单个字形的能力。字距调整也基于全像素，因此您受限于您可以实现的目标。它也有IE的问题，并不像人们希望的那样可靠。有一个名为kerningjs的javascript非常不错，但它也是基于全像素的，因此不如光栅化文本准确。

总的来说，网络上的字体在过去几年中变得更好。可悲的是，我们仍在处理过去的问题，因为字体只是打印或光栅化。不过，对于我们的字体爱好者来说，还有希望。正如@allcaps所说，CSS3 specification for linebox已经存在，所以它被广泛接受只是时间问题！

Answer 2

计算机字体这种特殊性的原因大多是历史性的。在过去，字体是小金属块的集合，每个字符都有一个字符，这些块的高度必须足以包含任何字符的所有元素，包括后代，上升和变音符号。印刷传统将字体大小定义为这种金属块的高度。这就是为什么几乎所有实际字符在视觉上都比文本设置的字体大小小得多，并且在它们上方和下方都有一些空白区域。

这是一篇很好的文章，解释了主要排版测量的历史根源：http://www.dev-archive.net/articles/typograph1-en.html#Ch22

Answer 3

x ov gjqpy bdfhkltCAPSÂÊÁËÈ

字形是在二维画布上设计的。对于拉丁文书写系统，此画布的高度是一致的，宽度可能会有所不同。字形放在基线上。 x在基线上，x的顶部定义x高度。圆形和尖形形状看起来较小，因此可以进行光学校正。下降器延伸到基线以下。上升，资本超过x高度。浏览器通过基线将文本与不同的字体（在同一段落中）对齐。

那么为什么构建边距？字形需要空白才能相互对齐。

我们可以做些什么来影响这些利润？

明智地选择字体。
指定行高p { line-height:0.5EM;}。
基线转换.shift { top:-.5em; position:relative; }
等待CSS3 module: line。

一般建议：不要自己调整字体，除非您完全确定自己在做什么。你会遇到很多事情之一就是暗示。 Windows需要提示字体和提示很难做到正确。加载字体的方式（@ font-face）将加载本地副本（如果存在）。您可以通过黑客禁用本地字体。您的里程可能会有所不同。

Answer 4

你可以在字体中使用行高和字母间距填充/边距... 否则为每个标题使用自定义css ........

/*use line-height*/
.font{
line-height: 1px; 
letter-spacing: 1px;
}

或使用自定义CSS ......

  h1{margin:1px 0;}
    h2{margin:1px 0;}
    h3{margin:1px 0;}
    h4{margin:1px 0;}

使用这些css之前使用reset css .......

Answer 5

字体顶部和底部的“填充”基本上是变音符号（https://en.wikipedia.org/wiki/Diacritic）的保留空间。有些脚本会在某些字母上叠加多个变音符号，包括大写字母（例如，越南语https://en.wikipedia.org/wiki/Vietnamese_alphabet），因此忘记为其保留某些位置的字体设计器将无法在以后扩展其字体。此外，水平脚本要求行之间的某些分离（前导）可读。

只有非常特殊的字形（如框绘图元素）才会扩展到字形框的限制 http://www.unicode.org/charts/PDF/U2500.pdf 这也是每个字形内置“填充”的原因。如果它是外部属性，则无法区分要连接的字形和需要分离的字形（换句话说，填充量是字形属性而不是整个字体属性）。

以下示例需要具有良好Unicode覆盖范围的良好字体（http://dejavu-fonts.org/有效）

连接框绘图元素
↓
┃ÇŖŞ
┃ẤỄǛȰ┃U←你真的需要包括“填充”以与箱子图纸对齐 ↑
拉丁语首都有多个变音符号（真的很拥挤）

最后，字体源于非常古老的技术（可移动类型），用于描述它们的惯例仍然指的是十五世纪的习惯，这使得它们对外行人员来说非常不明显。

（有关计算机字体格式添加的并发症的信息，另请参阅http://www.webfonts.info/node/330）

fonts opentype text-rendering

Answer 6

如果要在段落中的行之间使用空格，可以使用：

line-height: 3px; /*3px is an example*/

或者，如果您在字母之间使用空格，则可以使用：

letter-spacing: -2px;

拥抱， VIN。

Answer 7

这不是字体的问题。是的，正如@matthew所说，字体设计本身内置了一些字符。例如，查看说“Segoe”系列和“Verdana”系列之间的区别。如果您需要同时使用两者，您将继续重置您的CSS。一种风格是行不通的。

问题的大部分在于不同浏览器即使在同一个操作系统上呈现的方式。哎呀，甚至不同版本的IE呈现不同。 ClearType，消除锯齿，字体平滑，软件渲染而不是GPU渲染，渲染引擎本身等等都发挥了作用，以确保您不会在所有操作系统的所有浏览器中完成像素完美设计。 / p>

ClearType尝试与像素网格对齐，导致另一组问题与高度的细微差别。

此链接非常陈旧，但仍然非常相关：http://www.joelonsoftware.com/items/2007/06/12.html

另请参阅：http://www.codinghorror.com/blog/2007/06/whats-wrong-with-apples-font-rendering.html

另请参阅：https://webmasters.stackexchange.com/questions/9972/how-can-i-make-fonts-render-the-same-way-across-different-web-browsers

另请参阅：CSS font differences between browsers

你最好的选择是继续修补css，直到你足够接近。

Answer 8

这是我的意见

边距是从每一边到相邻元素的距离，并且可以为元素的顶部，左侧，右侧和底部设置边距属性
padding是HTML元素边框与其中内容之间的距离。

但是在你的情况下，你真的不需要这些，因为你对字体间距感兴趣，有一个名为letter-spacing的css属性

字母间距属性会增加或减少文本中字符之间的空格

尝试

 h2 {letter-spacing:-3px}

所有主流浏览器都支持字母间距属性。

注意：IE7及更早版本不支持值“inherit”。 IE8需要一个！DOCTYPE。 IE9支持“继承”。

Answer 9

文本元素的原生边距如下（至少在Firefox和Chrome中）：

<强> Working Example

 p{margin:16px 0;}
h1{margin:21px 0;}
h2{margin:19px 0;}
h3{margin:18px 0;}
h4{margin:21px 0;}
h5{margin:22px 0;}
h5{margin:24px 0;}

要删除它们，您必须重新设置边距，如下所示：

p, h1, h2, h3, h4, h5, h6{margin:0;}

Answer 10

在查看html文档的html源代码后发现，在所有浏览器添加了正常的边距/填充后，默认情况下chrome会添加自己的webkit的边距/填充属性。

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

解决方案不是正常的

*{
margin:0;
padding:0;
}

使用

添加样式

*{
margin:0;
padding:0;
-webkit-margin-before:0;    
-webkit-margin-after:0;
}

由于-webkit-margin-start和-webkit-margin-end已设置为0px，因此无法在此处设置它们。

告诉我这是否有效！：）

Answer 11

我认为是想要描述的内容

看看这个库

http://kerningjs.com/

CSS，遇见kerning。 Kerning，遇到CSS。克恩，风格，变换和   使用真实的CSS规则自动扩展您的Web类型。

印刷设计师已经太容易了。这是2012年;该   网络已经存在了二十多年，但网页设计师却没有   完全控制他们的排版？忘记这一点，使用Kerning.js！

它是免费的

Answer 12

字体本身似乎有问题。可以像上面所示使用CSS来解决问题，但是应该说在你的场景中更好地修复字体文件本身。

查看此页面，因为它可以让您更好地了解如何编辑字体： http://mashable.com/2011/11/17/free-font-creation-tools/

Answer 13

我经常遇到同样的问题，特别是当试图让文本与其旁边不是文本的东西（如图像）对齐时。

这是我取得了一些成功的技巧。选择文本的一部分，以便在其后面显示彩色背景。选择突出显示的顶部将显示字体认为字母的“顶部”和“底部”。以各种大小和跨多个浏览器截取字体的屏幕截图。放大Photoshop中的屏幕截图，并根据您认为“应该”为顶部和实际顶部的像素数进行计数。计算在整个选择高度内像素数代表的百分比。

然后在ems中的文本上设置负上边距，该上边距等于“溢出”的百分比。因此，如果文本应该是10px高，实际上是12px高，那么给它一个-0.2em的负上边距。

然后，无论您指定导致问题的字体系列，也包括此负上边距。您也可以使用相同的技术进行底部和侧面溢出，但我通常发现它是引起最大麻烦的顶部。

Answer 14

关于在所有

中将边距和填充值重置为零的内容

*{
  margin: 0;
  padding: 0;
}

Answer 15

我在使用一些webfonts图标时遇到了这种痛苦，并通过将它们放在一个绝对定位的容器中获得了更好的控制。

<强> HTML

 <div class="relative">
     <div class="webfont">&#10004</div>
 </div>

<强> CSS

 .relative { position:relative; }
 .webfont {  position: absolute;

             top: -5px; 
             left: -5px; /* easier control with these values */
           }

这感觉是一种更好的方式来控制跨浏览器的东西，而不是说，使用正/负边距和填充。

给文本块一个容器和类，我们有更清洁的能力来调整它的位置跨浏览器。（IMO）。

可能会有所作为。

干杯，

罗布

Answer 16

您可以使用line-height

执行此操作

我知道它在HTML5中并不常见，而且更像是HTML4.1，但是......

<font style="line-height: 5px;">

如果真的那么重要：

<font style="padding: 5px;">L</font>
<font style="padding: 5px;">o/font>
<font style="padding: 5px;">r</font>
<font style="padding: 5px;">e</font>
<font style="padding: 5px;">m</font>

嵌入式填充/字体边距

16 个答案:

x ov gjqpy bdfhkltCAPSÂÊÁËÈ