html - h1 标题上的链接使导入的网络字体大小加倍

Question

我在 Visual Studio 中构建网站时遇到 CSS/HTML 和导入的网络字体问题。

我已经为屏幕上 .mid 类的区域中的 h1 标签设置了样式，还包括了 <a> 的样式。在同一代码块中标记 h1 标记的子项。我希望一些 h1 标题充当链接并在悬停时改变颜色，而其他标题只是静态的。然后我设置了另一个定义，它只是将颜色设置为在悬停状态下发生变化，同时保持其他属性不变。

虽然颜色变化有效并且 h1 链接的样式类似于普通 h1 标题，但文本要大得多(见图)

CSS代码:

@import url(https://fonts.googleapis.com/css?family=Orbitron:400,500,700,900);

.mid h1, .mid h2, .mid h3, .mid h1 a:link, .mid h1 a:active, .mid h1 a:hover, .mid h1 a:visited {
        font-family: 'Orbitron', sans-serif;
        font-weight: 400;   
        margin-bottom: 10px;
        text-align: left;
        color: rgb(180,180,180);
        text-decoration: none;
    }

.mid h1, .mid h1 a, .mid h1 a:link, .mid h1 a:active, .mid h1 a:hover, .mid h1 a:visited {
        font-size: 1.4em;
        line-height: 2.1em;
    }

.mid h1 a:hover   {
        font-size: 1.4em;
        line-height: 2.1em;
        color: rgb(180,255,0);
    }

我已经尝试在悬停定义中再次设置大小，但没有任何区别。当我删除 <a>链接从标题大小恢复正常。奇怪的是，整个 CSS 文档中没有比 h1 font-size 属性更大的东西，并且假设 size 属性出于某种原因被应用到标题两次，或者存在导致这种奇怪行为的某种冲突。

另一个奇怪的是，将字体大小设置为 1.0em 可以解决问题(但会导致 h1 太小)。

HTML如下:

<h1>Welcome</h1>

<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p>

<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p>

<div class ="rule"></div>

<h1><a href = "http://www.mylink.com">Graphic Design</a></h1>
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p>

如有任何帮助，我们将不胜感激。

Answer 1

em 单位的作用有点像百分比——将 1.4em 嵌套在 1.4em 中(就像您在 h1 和 h1 a) 与文档相比结果为 1.96em。

您可以省略额外的 em 语句，只将其保留在 h1 上——或者使用 rem 单元代替；这些将设置相对于文档根而不是相对于当前元素的大小:

.em  { font-size: 1.4em }
.rem { font-size: 1.4rem }

<div class="em">1.4em
  <div class="em">1.4em
    <div class="em">1.4em</div>
  </div>
</div>

<div class="rem">1.4rem
  <div class="rem">1.4rem
    <div class="rem">1.4rem</div>
  </div>
</div>

<div class="unstyled">foo</div>

伪类略有不同——它们充当基类规则的替代品，而不是基类的子类。也就是说，如果您有以下规则:

a       {font-size: 1.4em}
a:hover {font-size: 1.4em}

悬停将使元素保持在 1.4em，不是 1.96em，因为 :hover 规则替换基类上的相同规则而不是相乘。