第一个字母 CSS 上的左侧空格答案

【问题标题】：Left space on first letter CSS第一个字母 CSS 上的左侧空格
【发布时间】：2015-05-02 19:17:20
【问题描述】：

我正在使用 Google 字体“Lato”，但标题和文本向左对齐时遇到问题...字体（当较大时）在第一个字母上似乎有紧排空间并且不会向左对齐没有空格！？

所以这里也有一个小提琴：

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

此外，在左边距（左边距：-10px）上添加一个负值似乎是一个糟糕的解决方法......这对于不同的字体大小总体上不起作用，除非根据需要单独调整...... . 肯定有更好的解决方案？

谁能帮忙？

【问题讨论】：

【解决方案1】：

空格在那里，因为它是一个标题。您可以通过以下方式将其对齐到左侧：

margin-left: -10px;

【讨论】：

【解决方案2】：

大多数 Web 浏览器的基本边距和内边距都有不同的默认设置。这意味着，如果您没有在 body 和 html 标签上设置边距和内边距，您可能会在页面上得到不一致的结果，具体取决于您用于查看页面的浏览器。

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

添加这个 CSS：

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

p{margin-left: 11px;}

【讨论】：

【解决方案3】：

尝试使用第一个字母

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

【讨论】：

【解决方案4】：

您可以使用 Gill Sans 字体。它与拉托非常相似。问题在于 Lato 字体本身而不是 Css。

【讨论】：

【解决方案5】：

好的，每个人都说这是由于自动填充或边距，因为该行是标题是错误的。将此小提琴视为证据：

浏览器或 CSS 或 DOM/浏览器级别的任何其他内容未呈现前导空间。它是字体。 H 字形周围有一些内置的内边距，字体越大，内边距越明显。

即使你使用负边距来补偿：

或者您可以使用不具有此特性的其他字体。

【讨论】：

你是对的...我尝试了其他几个 Google 托管的字体并发现了同样的问题...我不确定我是不是太愚蠢了，但是唉'它是在字体中'，我只是不想相信这可能是设计师或谷歌的疏忽......非常令人失望......
这太糟糕了，Raleway 产生同样的问题，而且它是我最喜欢的字体。
InDesign 为第一个字母提供左侧方位调整。这在 CSS 中不存在（还）。使用 % 或像素的负边距是不好的，因为它在移动到不同的媒体或比例时无法正确缩放。而是使用“rem”单位，它们是当前字体的相对 em 单位。仍然不是一个漂亮的黑客，因为每个字母都有自己的左侧轴承。

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

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

希望这对处于我这种情况的其他人有用。以下是更多信息的链接：http://www.w3schools.com/cssref/sel_firstletter.asp

【讨论】：

【解决方案8】：

在这种情况下，

PX 单位并不是一个好的选择。如果您使用行高等字体属性，我建议使用 EM 单位。因为它是针对每个字体大小自动计算的。它应该是这样的：

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

【讨论】：