CSS中的首字母留白问题

Question

我正在使用谷歌字体“Lato”，但标题和文本无法正确对齐... 当字体变大时，第一个字母似乎有一个字符间距，而且没有空格就无法左对齐！?

这里也有一个演示:

<h1>Hello</h1> <p>Hello, this is sentance</p>

FIDDLE

此外，在 margin-left 上添加负值（margin-left：-10px）似乎只是一个可怕的解决方法...除非根据需要进行单独调整，否则这对于不同字体大小总体上不起作用...肯定有更好的解决方案吧？

有人能帮忙吗？

- Morgan

---

在margin-left上添加负值似乎只是一个糟糕的解决方法…而且这对于不同字体大小的情况并不总是适用，除非根据需要进行个别调整…肯定有更好的解决方法吧？ - Morgan

从 h2 开始几乎没问题。但如果不改变 h1 的字体大小，那么它就没有问题。也许这种字体本身就不适合在大字号下查看。 - limekin

@Morgan，没有其他的方法。如果你选择/高亮（使其变蓝），你会发现h1左侧的边距比p大。这是因为字体大小更大，当字体大小变大时，边距也会变大。你无法改变这个。 - Reptar

我有一个理想的解决方案，@Morgan，使用Gill Sans字体代替，它非常类似于Lato。 - Lafontein

@Morgan 我检查了一下，没有使用 Lato 字体会出现相同的问题，请使用我的解决方案，它会起作用。 - rajesh

Answer 1

好的，所有认为这是由于标题自动填充或间距造成的人都是错误的。请看这个演示作为证据：

http://jsfiddle.net/w25j9L7o/26/

浏览器、CSS或DOM/Browser层中的任何其他东西都不会呈现前导空格。它是字体的问题。 H符号周围有一些内置填充，字体越大，该填充就越明显。

即使您使用负边距进行补偿：

1. 字符本身正在移动，其中包括空格，因此该空格也将滑动，影响布局。可见字符并没有滑入空白处，如果使用CSS来修复它，则整个字符（可见和不可见部分）都向左移动。

2. 您需要根据字体大小调整该偏移量，或找出底层百分比，以便随着任何设置的字体大小而增加偏移量。

或者您可以使用没有这种特征的不同字体。

- Anthony

---

你是正确的...我尝试了几种其他由 Google 托管的字体，并发现了同样的问题...我不确定是不是我太蠢了，但不幸的是，“问题就在字体里”，我只是不想相信这可能是设计师或 Google 的疏忽...非常令人失望... - Morgan

这太糟糕了，Raleway 也出现了同样的问题，而它是我最喜欢的字体。 - brunosalcedo

InDesign 提供了第一个字母的左侧间距调整功能。这在 CSS 中还不存在（尚未）。使用负边距百分比或像素是不好的，因为当移动到不同的媒体或缩放时，它不会正确缩放。相反，使用“rem”单位，它是相对于当前字体的相对 em 单位。但每个字母都有自己的左侧间距，所以仍然不是很完美的解决方案。 - PeterT

我最终也在寻找这个答案，因为我也在使用Raleway字体。虽然这是一种漂亮的字体，但有些字母的间距让我很苦恼。 - Adonis K. Kakoulidis

Answer 2

PX单位在这种情况下并不是一个好的选择。如果您正在使用字体属性，如行高等，请使用EM单位。因为它会针对每个字体大小进行自动计算。代码应该如下所示：

#yourDiv::first-letter {
   margin-left: -0.12em;
}

- Michal Kliment

---

我喜欢这个解决方案，因为如果我决定稍后调整字体大小，我可以设置并忘记它。 - Alex Banman

Answer 3

尝试使用首字母缩写。

h1:first-letter {
    margin-left: -10px
}

http://jsfiddle.net/w25j9L7o/1/

- Aaron

Answer 4

你可以从kernjs.com获取kern.js，并像他们在网站上所说的那样编辑前缀字距，"单击并拖动以调整字距、行高、字母位置。完成后，复制生成的CSS并在自己的样式表中使用它"。

- some_groceries

Answer 5

这个问题让我疯狂了，所以这里提供一个优雅的解决方案，使用::first-letter选择器。例如，我通过添加以下内容来解决我的间距问题：

#yourDiv::first-letter {margin-left:-5px;}

希望这对其他和我处境相似的人有所帮助。以下是更多信息的链接：http://www.w3schools.com/cssref/sel_firstletter.asp。

- A.J. Hernandez

Answer 6

有个空格在那里是因为它是标题。 你可以通过以下方式将其左对齐：

margin-left: -10px;

- Reptar

Answer 7

大多数Web浏览器对于基本边距和填充的默认设置不同。这意味着，如果您没有在body和html标签上设置边距和填充，则可能会根据使用浏览器查看页面而得到不一致的结果。

解决这个问题的最佳方法是将html和body标签上的所有边距和填充都设置为0：

添加以下CSS：

html,body {
    font-family:Lato;
    margin:0px;
    padding:0px;
}

p{margin-left: 11px;}

演示

- rajesh

Answer 8

你可以使用Gill Sans字体。它非常类似于Lato。问题在于Lato字体本身，而不是CSS。

这是Gill Sans的下载链接

- Lafontein

---

@Lafontain，谢谢你提供的链接 :) 我会联系Google，关于他们的设计疏忽问题!!! - Morgan