更改起始文本字母时向左对齐文本答案

【问题标题】：Text alignment to left changes while changing starting text letter更改起始文本字母时向左对齐文本
【发布时间】：2017-06-20 23:31:42
【问题描述】：

这里我有一个文本“Wake”，当我将“Wake”更改为“Make”时，它从左侧占用了额外的空间，例如从左侧增加了半个像素的额外边距。

我已将 @font-face 从 woff 更改为具有 css 属性的 otf

font-kerning: normal;

和

text-rendering: optimizeLegibility;
font-feature-settings: "kern";
font-kerning: normal;

但没有一个对我有用！！！

浏览器：铬：58.0.3029.110（64 位）火狐：53.0.2（64 位）

【问题讨论】：

你是用“M”还是“W”替换的？此外，它可能无关紧要，但你为什么要改变它呢？
这只是一个例子，给定文本动态，它可以是“M”、“Y”、“W”等任何东西
也许您的字体没有为字母使用完整的字形空间，然后显示间隙？
确保您使用的是等宽字体，所有字符都将占据相同的宽度。
它适用于所有其他字母，但它与“M”的行为很奇怪！！！

标签： html css

【解决方案1】：

您的问题是因为您没有使用等宽字体，这意味着某些字母中的较大字母比其他字母大，通常 M 是此类字体中最大的，这会导致您的文本移动。

我怀疑是否有一个纯 CSS 解决方案，至少看起来不错，因为大多数字母的比例不同，所以你需要根据你拥有的字母计算宽度并调整它们的大小。

找到一个可能的 JS 解决方案：Force Non-Monospace Font into Fixed Width Using CSS

了解您的问题的信息：

From Wikipedia Monospaced font source:

一种等宽字体，也称为固定间距、固定宽度或非比例字体，是一种字体，其字母和字符各占用相同数量的水平空间。这与可变宽度字体，其中字母和间距不同宽度。例如，两个高使用字母“I”和“E”不需要相同的足迹。两个字母的中心到下一个字母边缘不同（和中心到中心）间距需要（边距）变量宽度字体。变化的变量与会发生变化的变量相抵消否则为等宽居中。在现代比例字体中，每个维度都可以缩放和更改，但是这样的大小数学上必须仍然保持等间距或可变间距。

示例：

没有等宽字体：

div {
  font-size: 142px;
  font-family: Arial, Helvetica, sans-serif;
  border-left: 2px solid red;
}

<div>AAA</div>
<div>MMM</div>

等宽字体：

div {
  font-size: 142px;
  font-family: "Courier New", Courier, monospace;
  border-left: 2px solid red;
}

<div>AAA</div>
<div>MMM</div>

【讨论】：

OP 意味着 A 与 M 处于不同的起始位置，而不是它们的宽度不同。另请参阅我的example fiddle。
@MrLister 现在换成单色字体看看： www.jsfiddle.net/vuy8n5w6/1 ，它们从相同的位置开始，因为它们具有相同的比例：P
不在我的机器上，因为我没有名为“Mono”的字体。
@MrLister 我现在尝试了另一个Courier New 那里：jsfiddle.net/vuy8n5w6/3 但您可以在那里查看默认等宽字体：w3schools.com/cssref/css_websafe_fonts.asp
@Troyar 感谢您的帮助，但是如果我将字体更改为单声道，它会完全改变字体的外观和感觉，这是不可取的。我在一些博客中读到我们可以使用 font-kerning: normal;但这对我不起作用！

【解决方案2】：

虽然不是最佳实践，但有时只需在特定字母周围添加一个跨度，然后通过一个类调整该跨度有助于解决此类小的渲染问题。

例如：

<span class="move">M</span>ake

然后在css中：

.move {
  margin-right: -1px;
}

【讨论】：

那么当不是M 而是A 时会发生什么？
然后你用不同的类名做另一个跨度。
添加 26 个类（字母表中的每个字母一个）似乎非常有用，仅用于移动 1 px/2 px 的边距。