Question

每个FontAwesome图标都设置为继承其父级的字体大小。但是，字体最好以特定大小呈现，如果父级具有与font-size: 14px;不同的字体，则会影响图标质量。我的问题是，为什么要像这样使用CSS

.fa {font-size: none;}
.fa-lg {font-size: 1.33333333em;}
.fa-2x {font-size: 2em;}
.fa-3x {font-size: 3em;}
.fa-4x {font-size: 4em;}
.fa-5x {font-size: 5em;}

在不知道父字体大小是什么的情况下，因此有很难渲染图标的风险而没有这个

.fa {font-size: 14px;}
.fa-lg {font-size: 19px;}
.fa-2x {font-size: 28px;}
.fa-3x {font-size: 42px;}
.fa-4x {font-size: 56px;}
.fa-5x {font-size: 70px;}

我们确保每个图标都具有最佳质量。

Answer 1

所以，你想知道为什么font-awesome比'px'使用'em'单位。是吗？

原因：

假设您有一个大小为30px的标题文本（<h1>）。和14px的段落（<p>）文本。两者都有图标。

因此，如果字体很棒的图标是固定大小的，如14px，它将正确呈现正文。但它在标题标签中看起来很小，因为图标为14px，标题文本为30px。

如果我们使用相对大小，那么我们可以使用父级的字体大小，因此图标和文本的大小不同。

此外，如果它们具有固定大小，并且如果它与您网站的字体大小不匹配，则您需要每次手动重置其字体大小。有些人使用'13px'作为基本字体大小，有些人会使用'15px'。

我们不知道任何特定元素的用户字体大小，这就是我们使用em和rem单位的原因。

如果我不清楚，抱歉:(

谢谢！

Font Awesome继承父字体大小导致错误呈现

1 个答案: