如何在Web上使字体变薄

Question

我正在尝试设计一个网站,并遇到字体样式和大小的问题.我看了很多网站以获得一些想法,例如,如果你看看这个网站:http://www.albionwestcoast.com/并检查右侧团队成员名称的字体样式和大小你可以看到他们显然使用格鲁吉亚(红色),但当我尝试获得相同的形状时,我的字体看起来更大胆,更胖,我不知道为什么.

这是我得到的风格:

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

我错过任何东西以达到同样的效果吗？

Answer 1

我发现,如果添加属性-webkit-font-smoothing: antialiased;,文本将失去一点模糊性,看起来就像在Photoshop中一样(虽然仅适用于webkit).不确定这是否符合您的要求,但无论哪种方式,它都会使文本变得更薄.

Answer 2

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

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

如今使用简单的 2D 变换非常安全（https://caniuse.com/#feat=transforms2d）。

Answer 3

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

 font-weight: normal;

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

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

Answer 4

也许是 font-weight 属性。如果您为其指定一个 100 到 900 之间的数值（始终以 100 为增量），您将拥有更大的灵活性，即：100,200,300,400 等...

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

  font-weight: 300;