文本不具有大字体大小

问题描述：

我建立一个元素周期表中的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

我不明白这个问题。 “开始艰难的左”是什么意思？ – Artless 2013-04-29 04:02:38

你可以展示你想要达到的目标的形象 – jhunlio 2013-04-29 04:05:12

如果你看笔，他和红色边框之间有空格。我希望所有的文字在左边对齐。但不想要在元素全表上的每个单元上使用不同的文本缩进 – acowley 2013-04-29 04:05:22

答

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

看看http://www.freetype.org/freetype2/docs/glyphs/glyphs-3.html可以了解一些错综复杂的型号设计。

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

+1比我的技术答案要多得多。 :-) – 2013-04-29 04:09:07

感谢您的回复和有用的链接。 – acowley 2013-04-29 04:15:40

答

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

在大多数字体中，每个字符在其任一侧都有少量空白，以将其与相邻字母分开。没有这个空间，这些字母就会互相碰撞。在字体大的情况下，这个空间变得相当重要，并产生你所看到的效果。唯一的另一种选择是查找（或创建）没有该空间的字体（或者在每个字母后面没有空格的情况下只有尾部空格）。

谢谢，我以为是这样。对于大多数事情来说，似乎都有一些破解/修复，所以我认为值得提出这个问题！ – acowley 2013-04-29 04:15:01

文本不具有大字体大小

相关推荐