如何在网页上使字体变细

Question

我正在设计一个网站，遇到了字体样式和大小的问题。我看了很多网站以获取一些想法，例如如果您查看此网站：http://www.albionwestcoast.com/，并检查右侧团队成员名称的字体样式和大小，您会发现他们显然使用了Georgia（红色）。但当我尝试获得相同的形状时，我的字体似乎更加粗壮，我不知道为什么。

这是我得到的样式：

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

我有什么遗漏可以达到相同的效果吗？

- Ehsan Tavakoli

Answer 1

我发现如果你添加属性-webkit-font-smoothing: antialiased;，文本将失去一些模糊感，看起来就像在Photoshop中的效果(仅适用于Webkit)。不确定这是否满足你的需求，但无论如何都会使文本变得更加纤细。

- Jakob Axén Johansson

---

Firefox使用不同的名称来实现这一功能：-moz-osx-font-smoothing: grayscale。请访问https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth。 - Punit

Answer 2

您可以使用CSS转换属性调整字体大小并使其更高:

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

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

- Lubor Vajgar

Answer 3

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

 font-weight: normal;

参见：http://www.w3schools.com/cssref/pr_font_weight.asp 并非所有字体都支持小于400的字重。

- agm1984

Answer 4

或许可以使用font-weight属性。如果您分配一个数字值，介于100到900之间，总是以100为增量，例如：100、200、300、400等，那么您将拥有更多的灵活性...

• 400与普通字体相同，700与粗体相同

  font-weight: 300; 
  

- Stephane Gosselin

---

我尝试过了，但对我来说似乎还是更加粗体。600以下的所有内容看起来都完全相同。 - Ehsan Tavakoli

如果您使用标准可用字体，400的大小肯定应该比600小。也许您声明了一个覆盖您的CSS规则。您可以在3个主要位置声明CSS。尝试在具有style="font-weight:400;"的元素上声明它，您应该会看到差异。 - Stephane Gosselin

我拍了一张截图。似乎颜色在某种程度上给这个词增加了一些重量。链接 当它是黑色时，看起来有点轻。 - Ehsan Tavakoli

Answer 5

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

问题在于，在Windows和Mac上，字体看起来不同，它们使用不同的平滑算法。 （请参见https://github.com/vector-im/element-web/issues/11425）

因此，如果我们强制浏览器以相同方式平滑字体，则字体会变得更厚。

我已经找到了解决方案！

font-variant-ligatures: common-ligatures;

- Ekaterina Zakharenkova