2

我正在 HTMl/CSS 中构建一个元素周期表，我无法让大文本中的文本.element-symbol与 , 左对齐.atomic-weight，.element-name并且.atomic-symbol没有任意text-indent. 我想这只是与字母的宽度有关，但是有没有办法让.element-symbolstart 中的第一个字母很难离开？即反对红色边框

标记：

<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;
 }

Codepen 中的示例

4

2 回答 2

6

字体中的每个字形都位于一个边界框内。字形通常不会硬靠在该框的任何边缘上，并且每个字形（或字母）周围都会有不同数量的空间，以帮助在与其他字形组合形成单词时自然地间隔。

看看http://www.freetype.org/freetype2/docs/glyphs/glyphs-3.html来感受一下字体设计的一些复杂性。

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

于 2013-04-29T04:07:56.363 回答
3

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

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

于 2013-04-29T04:06:59.160 回答