似乎所有字体都有某种嵌入的填充或边距。通过设置：
margin: 0px;
padding: 0px;
你永远得不到你想要的。有人知道这是为什么吗？
问问题
16543 次
16 回答
24
听起来您遇到的问题不在于 CSS，而在于字体本身。大多数字体都定义了开箱即用的基线、x-height 和 line-height。您的具体问题可能与字体的前导，即行间距有关。有时这些值可能非常不一致。如果您真的想使特定字体正确排列，我建议您查看FontLab并为您正在使用的特定字体编辑字形/基线/行高。
您还可以查看该字体的网络安全版本。这些类型的字体通常经过专门隔开以在网络上呈现最佳效果。情况并非总是如此，但它可能会为您提供您正在寻找的结果。在此处查看 Google 的网络字体库。
更新
这个答案得到了足够的关注，我决定将下面的第一条评论添加到答案中并加以阐述。
浏览器重置：每个浏览器都会为许多保留的 HTML 标签设置默认状态，例如a和strong. 默认情况下还定义了其他内容，包括字体、行高、粗细和大小。这可能会影响字体的呈现。通常，这已本地化到特定的浏览器。因此，通过使用 CSS 重置，您可以消除浏览器中的默认呈现问题。Eric Meyers 重置是一个很好的重置，但肯定还有其他的。尝试使用不同的，看看哪个最适合你。
但是，CSS 重置通过针对所有浏览器并将它们设置为相同来工作。有些人更喜欢使用只针对每个浏览器的问题的东西。也就是说，标准化会更好。
还有一些 CSS 重置无法解决的问题。例如字体锯齿（使字体看起来平滑而不是锯齿状）。由于某些浏览器和操作系统没有为字体添加抗锯齿，因此您还会看到字形宽度差异。不幸的是，这在大多数情况下是不可避免的。有些人会使用像Cufon或Sifr这样的 flash 字体替换工具。这也有它自己的问题列表（例如FOUC）。
另一个更新
另一个仍然存在的问题是字距调整或字形之间的空间问题。有一个 CSS 属性letter-spacing可让您对文本块进行全局紧排，但它缺乏针对 Photoshop 或 InDesign 等单个字形的能力。字距调整也是基于全像素的，所以你会受到你所能达到的限制。它也有 IE 的问题，并不像人们希望的那样可靠。有一个名为kerningjs的 javascript相当不错，但它也是基于全像素的，因此不如光栅化文本准确。
总体而言，网络上的字体在过去几年中变得更好。可悲的是，我们仍在处理过去的问题，当时字体仅用于打印或光栅化。不过，对于我们这些字体爱好者来说，希望就在眼前。正如@allcaps 所说，linebox 的CSS3 规范已经存在，所以它被广泛接受只是时间问题！
于 2013-07-03T20:24:08.167 回答
6
计算机字体这种特殊性的原因主要是历史原因。过去，字体是一组小的金属块，每个块上都有一个字符，这些块的高度必须足以容纳任何字符的所有元素，包括后代、升序和变音符号。印刷传统将字体大小定义为此类金属块的高度。这就是为什么几乎所有实际字符在视觉上通常比为文本设置的字体大小要小得多，并且在它们的上方和下方都有一些空白。
这是一篇很好的文章，解释了主要印刷测量的历史根源：http: //www.dev-archive.net/articles/typograph1-en.html#Ch22
于 2013-07-10T00:24:21.220 回答
4
x ov gjqpy bdfhklt CAPS ÂÊÁËÈ
A glyph is designed on a two dimensional canvas. For the latin writing system the height of this canvas is consistent and width may vary. Glyphs are placed on a baseline. x is on the baseline and the top of x defines x-height. Round and pointy shapes appear smaller so are optically corrected. Descenders extend below the baseline. Ascenders, capitals go above x-height. Browsers align text with different fonts (in the same paragraph) by baseline.
So why is the build in margin? Glyphs need whitespace around to be aligned to each other.
What can we do to influence these margins?
- Choose your fonts wisely.
- Specify line-height
p { line-height:0.5EM;}. - Baseline shift
.shift { top:-.5em; position:relative; } - And wait for CSS3 module: line.
General advice: do not adjust a font yourself unless you are absolutely sure what you are doing. One of the many things you'll encounter is hinting. Windows needs hinted fonts and hinting is hard to get right. Also the way fonts are loaded (@font-face) will load a local copy if it exists. You can disable local fonts by a hack. Your mileage may vary.
于 2013-08-22T10:46:52.217 回答
3
您可以在字体中使用 line-height 和 letter-spacing padding/margin ... 否则为每个标题使用自定义 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 重置 css .......
于 2013-07-09T08:37:29.077 回答
2
字体顶部和底部的“填充”本质上是为变音符号保留的空间（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/有效）
联合方框图元素
↓<br> ┃ÇŖŞ<br> ┃ẤỄǛȰ┃U ← 您确实需要包含“填充”以与方框图对齐
↑<br> 带有多个变音符号的拉丁大写字母（真的很拥挤）
最后，字体源于非常古老的技术（活字），用于描述它们的惯例仍然是指 15 世纪的习惯，这使得它们对于外行来说非常不明显。
（另见http://www.webfonts.info/node/330有关计算机字体格式添加的复杂性的信息）
于 2013-08-29T18:07:06.163 回答
2
如果要在段落中的行之间使用空格，可以使用：
line-height: 3px; /*3px is an example*/
或者，如果您在字母之间使用空格，您可以使用：
letter-spacing: -2px;
于 2013-05-10T18:17:56.807 回答
1
字体本身不是问题。是的，正如@matthew 所说，字体设计本身内置了一些字符。例如，查看“Segoe”系列和“Verdana”系列之间的区别。如果您需要同时使用两者，您将继续重置您的 css。一种风格是行不通的。
问题的很大一部分在于即使在相同的操作系统上，不同的浏览器也呈现出不同的方式。哎呀，即使是不同版本的 IE 渲染也不同。ClearType、抗锯齿、字体平滑、软件渲染而不是 GPU 渲染、渲染引擎本身等都发挥着作用，以确保您不会在所有操作系统的所有浏览器中获得像素完美的设计。
ClearType 试图与像素网格对齐，从而导致另一组高度细微差异的问题。
这个链接很旧，但仍然非常相关：http ://www.joelonsoftware.com/items/2007/06/12.html
另见：http: //www.codinghorror.com/blog/2007/06/whats-wrong-with-apples-font-rendering.html
另请参阅：浏览器之间的 CSS 字体差异
你最好的选择是继续修补 css，直到你足够接近为止。
于 2013-07-04T16:19:45.610 回答
1
这是我的意见
- 边距是每边到相邻元素的距离，边距属性可以设置为元素的顶部、左侧、右侧和底部
- padding 是 HTML 元素的边框和其中的内容之间的距离。
但是在您的情况下，您实际上并不需要这些，因为您对字体间距感兴趣，因此有一个名为 letter-spacing 的 css 属性
- letter-spacing 属性增加或减少文本中字符之间的间距
尝试
h2 {letter-spacing:-3px}
所有主流浏览器都支持 letter-spacing 属性。
注意：IE7 及更早版本不支持值“inherit”。IE8 需要一个!DOCTYPE。IE9 支持“继承”。
于 2013-07-10T09:05:01.647 回答
0
字体本身似乎有问题。如上所示，可以使用 CSS 来解决问题，但仍然应该说，在您的场景中修复字体文件本身会更好。
查看此页面，因为它将让您更好地了解如何编辑字体： http: //mashable.com/2011/11/17/free-font-creation-tools/
于 2013-07-10T03:06:00.723 回答
0
将边距和填充值全部重置为零是什么意思
*{
margin: 0;
padding: 0;
}
于 2013-08-25T07:20:41.717 回答
0
我经常遇到同样的问题，尤其是在尝试让文本与旁边的非文本内容（例如图像）进行顶部对齐时。
这是我已经取得了一些成功的技术。选择文本的一部分，使其后面出现彩色背景。选择突出显示的顶部将显示字体认为字母的“顶部”和“底部”。以各种大小和跨多个浏览器截取字体的屏幕截图。放大 Photoshop 中的屏幕截图并计算您认为“应该”是顶部和实际顶部的像素数。计算像素数在整个选择高度内代表的百分比。
然后在 ems 中为文本设置负上边距，等于“溢出”的百分比。因此，如果文本应该是 10px 高而实际上是 12px 高，那么给它一个负的上边距 -0.2em。
然后，无论您分配导致问题的字体系列，还要包括这个负上边距。您也可以对底部溢出和侧面溢出使用相同的技术，但我通常会发现顶部是最令人头疼的问题。
于 2013-08-25T02:06:47.493 回答
0
我认为正在调整您打算描述的内容
看看这个图书馆
CSS，满足字距调整。紧缩，遇见 CSS。使用真正的 CSS 规则自动进行 Kern、样式、转换和缩放您的 Web 类型。
印刷设计师已经轻松了太久了。这是 2012 年；网络已经存在了二十多年，但网页设计师无法完全控制他们的排版？算了吧，使用 Kerning.js！
免费
于 2013-07-09T23:43:23.897 回答
0
文本元素的原生边距如下（至少在 Firefox 和 Chrome 中）：
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;}
于 2013-07-03T14:56:52.540 回答
0
在为图标使用一些 webfonts 时，我遇到过几次这种痛苦，并通过将它们放在绝对定位的容器中获得了更好的控制。
HTML
<div class="relative">
<div class="webfont">✔</div>
</div>
CSS
.relative { position:relative; }
.webfont { position: absolute;
top: -5px;
left: -5px; /* easier control with these values */
}
这感觉像是一种更好的方式来控制跨浏览器的东西，而不是说，使用正/负边距和填充。
给文本块一个容器和类，我们有更清晰的能力来调整它的跨浏览器位置。（海事组织）。
那里可能有什么东西。
干杯，
抢
于 2013-08-26T22:37:05.227 回答
0
看了一个html文档的html源码后发现，在所有浏览器正常添加margin/padding之后，chrome默认添加了自己的webkit的margin/padding属性。
-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，所以在这里设置它们是没有用的。
告诉我这是否有效！:)
于 2013-07-05T19:07:15.650 回答
-1
你可以这样做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>
于 2013-09-03T13:07:16.127 回答