如何在网页上使字体更细答案

【问题标题】：How to make a font thinner on web如何在网页上使字体更细
【发布时间】：2022-02-09 15:30:07
【问题描述】：

我正在尝试设计一个网站，但字体样式和大小有问题。我查看了许多网站以获取一些想法，例如，如果您查看以下网站：http://www.albionwestcoast.com/ 并检查右侧团队成员姓名的字体样式和大小，您可以看到他们显然使用了格鲁吉亚（在红色）但是当我尝试获得相同的形状时，我的字体显得更粗更胖，我不知道为什么。

这是我的风格：

font-size: 2em;
font-family: Georgia,'Times New Roman',serif;
font-style: italic;
font-weight: normal;

我是否缺少任何东西来获得相同的效果？

【问题讨论】：

标签： css fonts

【解决方案1】：

我发现如果你添加属性-webkit-font-smoothing: antialiased;，文本会失去一些模糊性，看起来就像它在例如Photoshop（虽然仅适用于 webkit）。不确定这是否符合您的要求，但无论哪种方式，它都会使文本更薄。

【讨论】：

firefox 使用不同的名称实现了这一点：-moz-osx-font-smoothing: grayscale。见developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

【解决方案2】：

为了澄清/确认，您正在寻找 CSS 属性：

 font-weight: normal;

见：http://www.w3schools.com/cssref/pr_font_weight.asp

并非所有字体都支持低于 400 的字重。

【讨论】：

【解决方案3】：

您可以使用较小的字体大小并通过 CSS 转换属性使其更高：

font-size: 1.5em;
transform: scale(1, 1.5);

在当今使用简单的 2D 变换非常安全 (https://caniuse.com/#feat=transforms2d)。

【讨论】：

【解决方案4】：

也许是字体粗细属性。如果为它分配一个介于 100 和 900 之间的数值，您将拥有更大的灵活性，始终以 100 为增量，即：100,200,300,400 等...

400和普通一样，700和粗体一样
```
font-weight: 300; 
```

【讨论】：

我试过了，但它对我来说似乎更大胆。 600 以下的一切看起来都一样。
如果你使用standard available fonts，400 应该明确小于 600。也许你有一个 css 规则声明之后覆盖了你的规则。您可以在 3 个主要位置声明 CSS。尝试使用 style="font-weight:400;" 在元素上声明它你应该会看到不同。
我截图了。似乎颜色以某种方式赋予了这个词一点重量。 link 当它是黑色的时候，它看起来有点轻。

【解决方案5】：

昨天我在寻找一种方法，如果我无法更改字体粗细，如何使字体变细。

有一个问题，在 windows 和 mac 上的字体看起来不同，它们使用不同的平滑算法。（见https://github.com/vector-im/element-web/issues/11425）

因此，如果我们强制浏览器以相同的方式平滑字体，那么字体会变粗。

我找到了解决办法！

font-variant-ligatures: common-ligatures;

【讨论】：