<span style="font-weight: 100 !important;"> 对 UI 没有任何影响答案

【问题标题】：<span style="font-weight: 100 !important;"> does not have any effect on the UI<span style="font-weight: 100 !important;"> 对 UI 没有任何影响
【发布时间】：2021-09-03 11:35:56
【问题描述】：

我使用的是 IE 11，并且我有以下 HTML：

<tr bgcolor="#eeeeee" bordercolor="#000000" valign="top">
        <td bordercolor="#eeeeee" align="right" valign="top">Blitz-/Sturm-Anbieter:<br/>
                <span style="font-weight: 100 !important;">Deaktiviert, weil nicht mehr notwendig</span>
        </td>
</tr>

但是，在浏览器中，会显示下表：

您可能会注意到，文本“Deaktiviert, weil nicht mehr notwendig”看起来与文本“Blitz-/Sturm-Anbieter:”完全相同，尽管我有声明

<span style="font-weight: 100 !important;">

在它之前。

你能告诉我问题是什么吗？

谢谢你和亲切的问候，亚历克斯

【问题讨论】：

有时可能是字体问题。如果字体不提供该重量，它只会呈现正常。您是否尝试过使用该字体的其他元素？
您使用的字体是否支持100 font-weight？
我也试过，但同样的问题。
如果你使用的是谷歌字体，你可以像<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;600&display=swap" rel="stylesheet"> 那样做
内联样式是正确的，所以这一定是你使用的字体造成的。您是否包含指向 Google 字体的直接链接，或者您是否使用字体？并非所有字体都支持 100 的粗细，如果是这种情况，您可能想尝试 300，这通常是轻量版本选择的粗细。

标签： html css internet-explorer-11

【解决方案1】：

在您的head-part (font-weight: 100,300,400 and 500 are selected here) 中使用这些链接：

body {
  font-family: 'Roboto', sans-serif;
}

#one {
  font-weight: 100;
}

#two {
  font-weight: 300;
}

#three {
  font-weight: 400;
}

#four {
  font-weight: 500;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap" rel="stylesheet">
    
<span id="one">100</span>
<span id="two">300</span>
<span id="three">400</span>
<span id="four">500</span>

【讨论】：

不幸的是，这对我没有帮助

【解决方案2】：

它不适用于font-weight: 100，因为您使用的字体没有那么精确的重量。

根据this doc：如果给出的确切权重不可用，则遵循Fallback weights规则。该规则意味着如果字体只有normal而bold，当权重值为100-500时，normal将用于实际渲染，当权重值为600-900时，bold将用于实际渲染。我想这就是你遇到的情况。

如果您想让font-weight: 100 工作，您需要使用具有此权重值的字体，例如google fonts Roboto。你可以像下面这样使用它，它在 IE 中运行良好：

body {
  font-family: 'Roboto';
}

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet">

<table>
  <tr bgcolor="#eeeeee" bordercolor="#000000" valign="top">
    <td bordercolor="#eeeeee" align="right" valign="top">
      Blitz-/Sturm-Anbieter:<br />
      <span style="font-weight: 100 !important;">Deaktiviert, weil nicht mehr notwendig</span>
    </td>
  </tr>
</table>

【讨论】：