字体大小继承的最佳实践

Question

我们正在努力将公司网站转换为更具有响应性的东西，因此正在重新设计 css 以使用 em 而不是经过尝试和验证的 px。

我遇到的问题是 font-size 的继承问题，我正在寻找解决这个问题的最佳实践。

目前，这是我解决问题的方式。

观看 jsfiddle，以便您愉快地查看

HTML

<h3>Heading with a <a href="#">Link</a></h3>

<p>this is a paragraph with a <a href="#">Link</a> inside of it</p>
<a href="#">this is a link outside the paragraph</a>​

CSS

：CSS，层叠样式表（Cascading Style Sheets）的缩写，是一种用于定义HTML、XML等文档展示方式的语言。它可以控制网页中元素的外观和布局，如字体、颜色、大小、间距、背景图像等。

body {font:normal 100% sans-serif;}
p {font:normal 1.5em sans-serif; margin-bottom:.5em;}
h3 {font:bold 3em serif; margin-bottom:.5em; }
a:link {font-size:1.5em;}

p a, li a, h1 a, h2 a, h3 a, h4 a, h5 a,
h6 a, dl a, blockquote a, dt a, dd a, td a {
    font-size:1em !important;
}

我知道em与父级的font-size有关。所以如果我设置p{font-size:1.5em;}，并且也设置a:link{font-size:1.5em;}，而我的<a>在<p>之外，那么它们将具有相同的相对大小，很好。

但是，如果我把一个<a>放在<p>里面，嵌入式<a>的字体大小现在比<p>大了1.5个em。为了克服这个问题，我使用了最后一个样式：p a、li a、h1 a......{font-size:1em !important;}。由于a:link具有比单独的p a更高的特异性，所以我必须使用!important（不喜欢!important），而且我不能使用font-size:inherit;，因为我们必须支持，我敢说，ie6（仍然有15%的流量，我们是生物技术公司，一些公司拒绝升级）。

所以我的问题是，我处理标签内的标签以避免我的排版出现问题这样做对吗？当我写完最后一个样式时，我想到了自己，这可能会变成维护的噩梦！我想使用rem，但某些用户的浏览器不支持。

你如何解决CSS中的这个问题，有什么“最佳实践”方法。

- Danferth

Answer 1

仅为块级元素设置字体大小，例如标题和导航块。内联更改字体会引起混乱，因此不要为链接等元素设置字体大小。相反，当需要时，设置包含导航链接的 ul 或 div 或其他元素的字体大小。

一般而言，尽可能少地使用 font-size 设置，以最小化不必要的累积效应的风险。

注意：

这与继承无关。当您在一个元素上设置 font-size 时，该元素肯定不会继承字体大小。这是关于相对单位 em 的影响。

例如，如果您设置了 a:link{font-size:1.5em;}，则可以轻松覆盖段落内部链接的设置，而无需使用 !important。您只需要更加具体，自然的方式是 p a:link{font-size:1em;}。

- Jukka K. Korpela

---

我明白了，我的错误在于在段落标签之外设置<a>的字体大小。实质上，您的意思是我应该将<a>包装在已设置字体大小的块内，即<p>。整个em的概念现在开始变得有意义了，谢谢。 - Danferth

嵌套块怎么办？ - crush

Answer 2

当你想改变链接的字体大小时，最好不要仅选择a，而是添加一个更具体的选择器。这样可以避免它们继承容器的字体大小。我从不仅仅改变a的字体大小，而是在需要时改变它们所在容器的字体大小。同样地，出于相同的原因，我避免为其他内联元素（例如、、）添加字体大小。

- Jeremy

Answer 3

我建议使用重置样式表，例如Eric Meyer的reset.css，它将在所有元素上设置字体继承。然后在body中设置默认（或“主”）字体大小，并使用相对单位em在所有其他元素上设置字体大小。

你所遇到的“堆叠”相对字体大小的问题不应该是一个问题，因为你很少需要在包含除文本以外的任何内容的元素上设置新字体，例如标题标签。在例外情况下，相对字体大小应该是你网站的一项资产，例如在页脚区域，所有文本都应该比网站默认值小一点。

在相对字体大小导致不想要的行为的（罕见）情况下，你总是可以这样做：

p
{
    font-size: 1.5em;
}

a
{
    font-size: 1.5em;
}

p a
{
    font-size: 1em;
}

- Hubro

---

是的，已经加载了reset.css，并将body设置为100％。看起来你使用了p a {}选择器做了我正在做的事情。它有效果，我很满意。如果可以的话，我想设置一个typography.css，然后就忘记它，直到像你说的那样出现异常情况。我想知道这是否是每个人解决字体继承问题的方式。除了rem之外，我是否错过了什么重要的东西。 - Danferth

这就是我做事的方式，我从未遇到过异常情况。在需要为具有子元素的元素指定新字体的情况下，这种情况非常罕见，而且堆叠字体大小不正确的情况更加罕见。我觉得这不值得担心。 - Hubro

很高兴知道，我喜欢响应式设计的理念，当我遇到这个问题时，我设置了p a{}样式，并想着也许有更好的方法。谢谢你告诉我我朝着正确的方向前进。 - Danferth