更改开始文本字母时，左侧的文本对齐方式会发生

Question

这里我有一个文字＆＃34; Wake＆＃34;，当我改变＆＃34; Wake＆＃34;到＆＃34;制作＆＃34;，它从左边占用了额外的空间，就像从左边增加了半个像素。

我已使用css属性

将@ font-face从woff更改为otf

font-kerning: normal;

和

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

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

浏览器： Chrome：58.0.3029.110（64位） FireFox：53.0.2（64位）

Answer 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>

Monospaced字体：

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

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

Answer 2

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

例如：

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

然后在css中：

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