字体大小继承的最佳做法 [英] Best practice for font-size inheritance

问题描述

正在将我们的公司网站转换为更具响应性的工作，因此重新修改 css 以使用 em px 。

我遇到的问题是继承 font-size ，并且正在寻找这个问题的最佳做法。

这是我如何解决现在的问题。

jsfiddle您的观看乐趣

HTML

  h3>带< a href =＃>链接< / a>< / h3> 
 
< p>这是一个带有< a href =＃>链接< / a>内部< / p> 
< a href =＃>这是段落外的链接< / a> 
  

CSS

  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;} 
 
pa，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> c>< p> 嵌入的< a> 的字体大小现在更大，因为 1.5em 大于< p> 。为了克服这个问题，我使用 p a，li a，h1 a，...... {font-size：1em！important;} 的字符串设置最后一个样式。由于 a：link 具有比仅仅 pa 更高的特异性，所以必须使用！important （不是！important 的粉丝），也不能使用 font-size：inherit; 因为我们必须支持，我敢说， ie6 （仍然有15％的流量，我们是生物技术，一些公司只是拒绝升级）。 >



所以我的问题是这样的。我是否正在处理标签内的标签，以防止我的排版打破了正确的方式？一旦我写了我自己想的最后一种风格，这可能成为一个噩梦维护！我想使用 rem ，但浏览器不支持部分用户。

如何你在自己的css中解决这个问题，什么是最佳实践方法。

解决方案

块，例如标题和导航块。更改字体在线会导致混乱，所以只是不设置字体大小，例如链接。而是根据需要设置 ul 或 div 或包含导航链接的其他元素的字体大小。 p>

一般来说，尽量少使用 font-size 设置，以尽量减少不必要的累积效应的风险。

注意：

这不是关于继承。当您在元素上设置 font-size 时，元素当然不会继承字体大小。这是关于 em 单位的相对性质的影响。

如果您设置 a：link {font-size：1.5em;} 例如，您可以轻松地覆盖段落中的链接而不使用！important 。你只需要更具体，这里的自然方式是 p a：link {font-size：1em;} 。

working on converting our company site over to something more responsive so reworking the css to use em's instead of the tried and true px.

The problem i'm running into is the inheritance of font-size and am looking for best practices for this issue.

This is how I'm solving the problem as of now.

jsfiddle for your viewing pleasure

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

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

I understand that em's are related to the parent font-size. so if I set p{font-size:1.5em;} and also set a:link{font-size:1.5em;} and my <a> is outside of my <p> then they will have the same relative size, great.

But if i then place an <a> inside a <p> the font size of the embedded <a> is now larger as it is 1.5em's larger than the <p>. To overcome this I set the last style with a string of p a, li a, h1 a,......{font-size:1em !important;}. Since a:link has a higher specificity than just p a i had to use !important (not a fan of !important), also i can't use font-size:inherit; as we have to support, dare i say it, ie6 (still have 15% traffic, we are biotech and some companies just refuse to upgrade).

So my question to you is this. Am I going about this the right way in tackling tags inside of tags to prevent my typography from breaking up? As soon as i wrote the last style i thought to myself, this can become a nightmare to maintain! I would like to use rem but the browser support isn't there for a portion of users.

How do you solve this problem in your own css and what would be a "best practices" approach to this.

解决方案

Set font size for blocks only, such as headings and navigation blocks. Changing font inline causes a mess, so just don’t set font size for, say, links. Instead, when desired, set the font size of a ul or div or other element that contains navigation links.

In general, use as few font-size settings as possible, to minimize risks of unwanted cumulative effects.

Notes:

This is not about inheritance at all. When you set font-size on an element, the element certainly does not inherit font size. This is about the effect of the relative nature of the em unit.

Should you have set a:link{font-size:1.5em;} for example, you can easily override it for links inside paragraphs without using !important. You just have to be more specific, and the natural way here would be p a:link{font-size:1em;}.

这篇关于字体大小继承的最佳做法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！