Question

我正在HTMl / CSS中构建一个周期表，我无法在大.element-symbol内获取文本，以便与.atomic-weight，.element-name和.atomic-symbol左对齐没有任意text-indent。我想这只是与字母的宽度有关，但是有没有办法让.element-symbol中的第一个字母开始硬起来？即对着红色边框

标记：

<div class="cell">
  <div class="atomic-number"><span>2</span></div>
  <div class="element-symbol">      
    <abbr>He</abbr>
  </div>
  <div class="element-name"><span>Helium</span></div>
  <div class="atomic-weight">4.002602</div>
  </div>

CSS :(红色边框显示对齐问题）

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  line-height: 1;
  }

.cell {
  border: 1px solid black;
  font-family: sans-serif;
  width: 280px;
  height: 280px;
  margin: 20px auto;
  padding:10px;
  background-color: #4DBCE9;
  }

.element-symbol {
 font-size: 173px;
 border: 1px solid red;
 font-weight: 400;
 /*text-indent: -12px;  dont want to use this*/
 }

.atomic-number, .atomic-weight, .element-name {
 font-size: 25px;
 border: 1px solid red;
 }

Example in codepen

Answer 1

字体中的每个字形都位于边界框内。字形通常不会难以抵挡该框的任何边缘，并且每个字形（或字母）周围都会有不同的空间，以便在与其他字形组合形成单词时自然地将其空间化。

看看http://www.freetype.org/freetype2/docs/glyphs/glyphs-3.html，了解一些复杂的类型设计。

我不知道CSS中可以消除该空间的任何文本或字体属性，并且在任何情况下每个字形的空间都不同，并且不同字体中的相同字形之间也不同。

Answer 2

你是对的 - 这只是因为字母的大小。

在大多数字体中，每个字符在其两侧都有少量空格，以将其与相邻字母分开。如果没有这个空间，这些字母就会相互碰撞。在较大的字体大小下，这个空间变得非常重要，并产生您所看到的效果。唯一的另一种选择是找到（或创建）没有该空格的字体（或者每个字母后面只有尾随空格而没有前导空格）。

文本未与大字体对齐

2 个答案: