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

Question

我使用的是Google字体＆＃39; Lato＆＃39;我有问题，标题和文字正确对齐到左边...字体（大的时候）似乎在第一个字母上有一个空间，并且在没有空格的情况下不会左对齐！？

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

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

FIDDLE

另外，在左边缘（magin-left：-10px）添加负值似乎是一个糟糕的解决方法......除非根据需要单独调整，否则这对于不同的字体大小不起作用。那么一定有更好的解决方案吗？

有人可以帮忙吗？

Answer 1

好吧，由于该行是标题而由于自动填充或边距而说出来的每个人都是错误的。看到这个小提琴作为证据：

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

领先的空间不是由浏览器或CSS或DOM /浏览器级别的任何其他内容呈现的。这是字体。 H字形周围有一些内置填充，字体越大，填充越明显。

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

1. 角色本身正在移动，其中包括空白区域，因此空白区域也会滑动，从而影响布局。可见角色不会滑入空白区域，如果使用CSS修复它，整个角色（可见和不可见）会向左移动。

2. 您需要根据字体大小调整偏移量或计算出基础百分比，以便偏移量随着任何字体大小的设置而增长。

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

Answer 2

在这种情况下，

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

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

Answer 3

尝试使用第一个字母

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

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

Answer 4

白色空间在那里，因为它是一个标题。 您可以通过执行以下操作将其对齐：

margin-left: -10px;

Answer 5

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

Here is your link for GillSans

Answer 6

您可以从kernjs.com获取kern.js并编辑您的前端字距，就像他们在网站上说的那样＃34;点击并拖动以调整您的字距，行高，字母位置，当您＆＃39 ;完成后，复制生成的CSS并在您自己的样式表中使用它＆＃34;

Answer 7

这个问题让我抓狂，所以这里是一个优雅的解决方案，它使用:: first-letter selector。例如，我可以通过添加：

来修复我的间距问题

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

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

Answer 8

大多数Web浏览器都具有不同的基本边距和填充的默认设置。这意味着，如果您未在自己的正文和html标记上设置边距和填充，则可能会在页面上显示不一致的结果，具体取决于您使用哪个浏览器来查看该页面。

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

添加此CSS：

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

p{margin-left: 11px;}

DEMO