在字体中嵌入padding/margin



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

margin: 0px;
padding: 0px;
你永远得不到你想要的。有人知道这是为什么吗?

听起来你遇到的问题不是CSS而是字体本身。大多数字体都定义了基线、x高和行高。你的具体问题可能是字体的行距,行与行之间的空间。有时,这些值可能非常不一致。如果你真的想让一个特定的字体正确排列,我建议你看一下FontLab,并为你正在使用的特定字体编辑字形/基线/行高。

你也可以看看这个字体的网络安全版本。这些类型的字体通常已经特别间隔,以在网络上呈现最佳效果。这并不总是如此,但它可能会让你得到你想要的结果。点击这里查看谷歌的网页字体库。

这个答案已经受到了足够的关注,所以我决定在下面的第一个评论中添加这个答案并对此进行阐述。

浏览器重置:每个浏览器都会为许多保留的HTML标签设置默认状态,如astrong。默认情况下还定义了其他内容,包括字体、行高、粗细和大小。这可能会影响字体的呈现。通常这是针对特定浏览器进行本地化的。因此,通过使用CSS重置,您可以消除浏览器中的默认呈现问题。重置是一个很好的重置,但肯定还有其他的重置。尝试使用不同的,看看哪一个最适合你。

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

还有一些CSS重置无法修复的问题。比如字体混叠(使字体看起来平滑而不是锯齿状)。由于某些浏览器和操作系统没有为字体添加抗锯齿,因此您还会看到字形宽度的差异。不幸的是,这在大多数情况下是不可避免的。有些人选择使用flash字体替代工具,如Cufon或Sifr。这也有它自己的问题列表(比如FOUC)。

另一个更新

另一个仍然存在的问题是字距问题,或字形之间的空间。有一个CSS属性letter-spacing,可以让你在文本块上做一个全局字,但它缺乏像Photoshop或InDesign这样针对单个字形的能力。字距也是基于全像素的,所以你可以实现的限制。它也有IE的问题,不像人们希望的那样可靠。有一种叫做kerningjs的javascript,它相当不错,但它也是基于全像素的,因此不如光栅化文本准确。

总的来说,在过去的几年里,网络上的字体变得更好了。可悲的是,我们仍然在处理过去的问题,当字体只用于打印或光栅化时。不过,对于我们这些字体爱好者来说,前景还是有希望的。正如@allcaps所说,CSS3的linebox规范已经出来了,所以它被广泛接受只是时间问题!

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

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

x ov gjqpy bdfhklt CAPS ÂÊÁËÈ

字形是在二维画布上设计的。对于拉丁文字系统,画布的高度是一致的,宽度可能会有所不同。字形被放置在基线上。X在基线上,X的顶部定义X高度。圆形和尖尖的形状看起来更小,所以光学校正。下降线延伸到基线以下。上升线,大写字母在x高度以上。浏览器按基线将不同字体的文本(在同一段落中)对齐。

那么为什么要建立保证金呢?字形需要周围的空白来相互对齐。

我们能做些什么来影响这些页边距?

    选择合适的字体。
  1. 指定行高p { line-height:0.5EM;}
  2. 基线位移.shift { top:-.5em; position:relative; }
  3. 等待CSS3模块:line.
一般建议:不要自己调整字体,除非你绝对确定你在做什么。你会遇到的许多事情之一就是暗示。Windows需要有暗示的字体,而暗示很难用对。此外,字体的加载方式(@font-face)将加载本地副本,如果它存在的话。您可以通过hack禁用本地字体。你的里程可能会有所不同。

您可以在字体中使用line-height和letter-spacing填充/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 .......

字体顶部和底部的"padding"基本上是为变音符号保留的空间(https://en.wikipedia.org/wiki/Diacritic)。有些脚本会在一些字母(包括大写字母)上叠加多个变音符号(例如,越南语https://en.wikipedia.org/wiki/Vietnamese_alphabet),因此,如果字体设计人员忘记为它们保留一些位置,那么以后将无法扩展他的字体。此外,水平脚本要求行与行之间有一定的分隔(行距),以便于阅读。

只有非常特殊的字形,如框绘制元素扩展到字形框的限制http://www.unicode.org/charts/PDF/U2500.pdf这也是为什么每个字形都内置了"填充"。如果它是一个外部属性,则不可能区分想要接合的字形和需要一些分隔的字形(换句话说,填充量是字形属性,而不是whole-font属性)。

下面的例子需要一个良好的字体与体面的Unicode覆盖(http://dejavu-fonts.org/works)

连接框绘制元素

┃CŖŞ
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>↑
带有多个变音符号的拉丁大写字母(真的很拥挤)

最后,字体源于非常古老的技术(活字),用于描述它们的惯例仍然是指15世纪的习惯,这使得它们对外行人来说相当不明显。

(参见http://www.webfonts.info/node/330了解计算机字体格式增加的复杂性)

如果你想在段落中使用行间空格,你可以使用:

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

或者,如果你在字母之间使用空格,你可以使用:

letter-spacing: -2px;

字体本身没有问题。是的,就像@matthew说的,字体设计本身就有一些特色。例如,查看"Segoe"家庭和"Verdana"家庭之间的区别。如果你需要同时使用这两种方式,你将继续重置你的css。一种风格是行不通的。

更大的问题在于不同浏览器在相同操作系统上的呈现方式。见鬼,甚至不同版本的IE渲染也不同。ClearType, Anti-aliasing,字体平滑,软件渲染而不是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

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

参见:不同浏览器的CSS字体差异

你最好的办法是继续修补css,直到你足够接近。

文本元素的本地页边距如下(至少在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;}

在查看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,所以在这里设置它们是没有用的。

告诉我这是否有效!:)

我想这就是你想要描述的

看一下这个库

http://kerningjs.com/

CSS,满足字距。字距,遇见CSS。Kern, style, transform,等等使用真正的CSS规则自动缩放网页类型。

印刷设计师已经轻松了太长时间。这是2012年;的Web已经存在了二十多年了,但是Web设计师并没有得到完全控制他们的排版?忘了它吧,使用Kerning.js吧!

它是免费的

字体本身似乎有问题。CSS可以使用如上所示来解决这个问题,但仍然应该说,在您的场景中,最好自己修复字体文件。

看看这个页面,它会让你更好地了解如何编辑字体:http://mashable.com/2011/11/17/free-font-creation-tools/

这是我的意见

  • 边距是指每边到相邻元素之间的距离,可以为元素的上、左、右和下设置边距属性
  • padding是指HTML元素的边框和元素内内容之间的距离。

但是在你的情况下,你并不需要这两个如果你对字体间距感兴趣,有一个css属性叫做letter-spacing

  • letter-spacing属性增加或减少文本中字符之间的间距

 h2 {letter-spacing:-3px}

所有主流浏览器都支持letter-spacing属性。

注意:值"inherit"在IE7及更早版本中不支持。IE8需要!DOCTYPE。IE9支持"继承"。

我经常遇到同样的问题,特别是当试图让文本与旁边的非文本内容(如图像)对齐时。

这里有一个我已经取得一些成功的技巧。选择文本的一部分,以便在其后面显示彩色背景。选择突出显示的顶部将显示字体认为的字母的"顶部"one_answers"底部"。在不同的大小和不同的浏览器中截取字体的屏幕截图。在Photoshop中放大屏幕截图,数出你认为"应该"是顶部和实际顶部的像素数。计算像素数在整个选择高度中所占的百分比。

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

然后无论你在哪里分配引起问题的字体族,也包括这个负上边距。你也可以用同样的技巧来处理底部和侧面的溢出,但我通常发现顶部会引起最头疼的问题。

如何将所有

的边距和填充值重置为零呢?
*{
  margin: 0;
  padding: 0;
}

我在使用一些webfonts作为图标时遇到过几次这种痛苦,通过将它们放置在绝对位置的容器中获得了更好的控制。

 <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 */
           }

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

给文本块一个容器和类,我们有更多的能力来调整它的位置跨浏览器。(在我看来)。

可能有什么。

欢呼,

Rob

你可以用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>

最新更新