Question

我已将h2字体权重设置为700，当我加载页面时，我的H2标签加载了正确的字体重量（700）但半秒后反弹到更轻的字体重量，这是不正确的。

如何阻止字体重量的变化？

可能是因为我的主题CSS和Bootstrap之间可能存在冲突？

您可以在以下位置查看示例：https://www.moneynest.co.uk/how-to-budget/

参见文本 - “如何预算 - 目录”。

萨姆

Answer 1

对于快速解决方案，设置重要的字体样式会拒绝任何更改。

font-weight: 700 !important;

Answer 2

它看起来像以下CSS文件：

<svg width="400" height="180">
  <defs>
    <g id='circle'>
      <circle r="50" cx="100" cy="100" />
    </g>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white" />
      <use xlink:href="#circle" />
    </mask>
  </defs>
  <use xlink:href="#circle" opacity='0.5' />
  <line id='problem-line' x1='100' y1='100' x2='300' y2='100' stroke='red' mask="url(#hole)" />
  <line x1='100' y1='100' x2='300' y2='50' stroke='green' mask="url(#hole)" />
  <line x1='100' y1='100' x2='300' y2='150' stroke='blue' mask="url(#hole)" />

</svg>
<div>
  <button>Remove mask</button>
</div>

正在添加以下规则：

https://www.moneynest.co.uk/wp-content/themes/genesis-sample/A.style.css,qver=2.2.4.pagespeed.cf.dNG5vHCgAf.css

可以像Rudi建议的那样在你的CSS中添加！important，或者更具体地说明你的css覆盖：

h1.title{
    font-weight: 300;
}

Answer 3

哈利路亚！我设法解决了它。

我最终将<h2>标记上的字体系列从Open Sans更改为Open Sans:700然后我在其上添加了!important标记，以避免出现问题已应用font-weight: bold;。

h2 {
font-family: "Open Sans:700",sans-serif !important;
font-weight: bold;
}

自我注意 - 保持简单并避免使用太多样式表。

正确的字体重量负载然后改变半秒后？

3 个答案: