如何在Web上使字体变薄

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在Web上使字体变薄相关的知识,希望对你有一定的参考价值。

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

这是我得到的风格:

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

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

答案

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

另一答案

澄清/确认,您正在寻找CSS属性:

 font-weight: normal;

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

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

另一答案

也许是font-weight属性。如果为它指定一个数字值,介于100和900之间,总是以100为增量,即:100,200,300,400等,您将获得更大的灵活性......

  • 400与正常相同,700与粗体相同 font-weight: 300;
另一答案

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

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

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

以上是关于如何在Web上使字体变薄的主要内容,如果未能解决你的问题,请参考以下文章

wpf中怎么是鼠标移动到textblock中的字体上使其改变颜色

如何在 Swift 上使这段代码异步

JQuery动画边框不移动div

如何在 Android 上使背景透明 20%

如何在 Android 上使图像透明?

如何在移动视图上使输入和按钮堆栈相互叠加