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

我使用的是谷歌字体“Lato”，我在标题和文本向左对齐时遇到了问题。。。字体（较大时）的第一个字母上似乎有一个空格，并且不会在没有空格的情况下向左对齐

这里还有一把小提琴：

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

你好你好，我是森坦斯

此外，在左边空白处添加负值（magin left:-10px）似乎是一个糟糕的解决方法。。。而且，除非根据需要单独调整字体大小，否则对于不同的字体大小，这将不起整体作用。。。肯定有更好的解决办法

---

有人能帮忙吗？

这里有空白，因为它是标题。 您可以通过执行以下操作将其向左对齐：

margin-left: -10px;

---

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

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

添加以下CSS：

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

p{margin-left: 11px;}

---

尝试使用第一个字母

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

---

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

---

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

前导空间不是由浏览器或CSS或DOM/浏览器级别的任何其他内容渲染的。这是字体。

H

字形周围有一些内置的填充，字体越大，填充越明显

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

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

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

---

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

您可以从获取kern.js并编辑前端字距，就像他们在其网站上所说的“单击并拖动以调整字距、行高、字母位置，完成后，复制生成的CSS并在您自己的样式表中使用”这个问题让我抓狂，所以这里有一个优雅的解决方案，它使用：：第一个字母选择器。例如，我可以通过添加以下内容来解决间距问题：

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

---

希望这对其他处于我这种处境的人有用。这里有一个链接来获取更多信息：

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

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

---

在左边空白处添加负值似乎是一个糟糕的解决方法。。。而且，除非根据需要单独调整字体大小，否则对于不同的字体大小，这将不起整体作用。。。肯定有更好的解决方案吗？从

h2

开始就差不多了。但是，当您不更改

h1

的字体大小时，就可以了。也许字体本身不适合大尺寸查看。@Morgan在你的主体css样式中添加边距：0px和填充：0px我有适合你的理想解决方案@Morgan使用Gill Sans字体，它与Lato非常相似。@Morgan我在没有字体Lato的情况下检查了它，它会对我的解决方案进行相同的问题检查，它会起作用你是正确的。。。我已经尝试了其他几个谷歌托管字体，发现同样的问题。。。我不确定我是不是太笨了，但唉，‘它是在字体里’，我只是不想相信这可能是设计师或谷歌的疏忽。。。非常令人失望…这太糟糕了，Raleway产生了同样的问题，这是我最喜欢的字体。InDesign为第一个字母提供左侧方向角调整。这在CSS中还不存在。使用%或像素的负边距是不好的，因为它在移动到不同的媒体或缩放时无法正确缩放。而是使用与当前字体相对的“rem”单位。仍然不是一个很好的黑客，因为每个字母都有它自己的左边方向。@Lafontain，谢谢你的链接：）我将与谷歌联系他们的设计疏忽！！！我喜欢这个解决方案，因为如果我决定以后调整字体大小，我可以设置它，然后忘记它。