如何将字体粗细设置为 100 以下？答案

【问题标题】：How to setting font-weight under 100?如何将字体粗细设置为 100 以下？
【发布时间】：2021-11-30 05:49:43
【问题描述】：

当我将字体大小从 0 增加到 30 像素时。它也增加了字体大小和字体粗细。但是，我只想增加字体大小而不增加字体粗细。下图是我增加字体大小的时候。

但是，我想把它变成这样。

你能帮我解决这个问题吗？将不胜感激！

【问题讨论】：

这取决于字体。你可以试试用细字写的。
正如@Azu 指出的那样，您使用的字体系列与预期结果中的字体不同。除了将字体更改为具有较轻字体粗细的字体之外，您没有太多选择 - 或者您可以尝试我提供的答案，它本质上是使用文本笔划来伪造更细的字体。

标签： html css reactjs

【解决方案1】：

无法设置低于 100 的值，但您可以尝试使用：

font-weight: lighter !important;

请记住使用 ID 或某些类来捕获您的标签，以便对您的 css 代码执行更高的优先级。也许你的问题是一个覆盖。

例如：

//CSS selector specificity = 111
p#yourId.firstClass{
  font-weight: 300;   //this style is applied
}

//CSS selector specificity = 100
#yourId{
  font-weight: 100;   //this is overridden by the first
}

【讨论】：

【解决方案2】：

使用transform: scale(.5, 1);，它将文本设置为正常宽度的 50%，但正常高度的 100%，然后您可以将 font-size 设置为足够大的值。另外，您的文字似乎有点不透明，所以我也将opacity 设置为0.7，但您可能不希望这样...

p {
  display: inline-block;
  font-size: 50px;
  transform: scale(.50, 1);
  opacity:0.7;
}

&lt;p&gt;Hello, friend!  안녕 친구!&lt;/p&gt;

或者，让它更薄，比例为 0.25/1....

p {
  display: inline-block;
  font-size: 50px;
  transform: scale(.25, 1);
  opacity:0.7;
}

&lt;p&gt;Hello, friend!  안녕 친구!&lt;/p&gt;

【讨论】：

【解决方案3】：

您可以尝试使用-webkit-text-stroke - 尽管有前缀it works in all browsers besides IE.

一个缺点是你的文本必须是纯色的。

h1 {
  font-size: 100px;
}

h1.stroke {
  -webkit-text-stroke: 2px white;
}

<h1>안녕 친구!</h1>

<h1 class="stroke">안녕 친구! stroke</h1>

【讨论】：