我看不到的CSS：工作围绕“字体重量：轻”不工作

font-weight: normal

和

font-weight: lighter

所呈现的结果之间有什么区别我使用Firefox 50.0在Linux上。

有没有办法让font-weight: lighter可见？

数字（100..900）在我眼中并没有显示出明显的变化。

下面是一个例子页：https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/font-weight

背景

我的字体不支持更轻的字体权重。是的，我可以使用不同的字体。但改变字体超出了我的范围。

来源

2017-01-09 guettli

的'字体重量“属性只适用于重量变体可用于该字体。 – Terry

-2

我发现了一个变通的：css opacity

这里是一个屏幕快照，显示了三种样式：

正常
font-weight: bold
opacity: 0.5

来源

2017-01-09 13:20:18 guettli

取决于使用的字体系列，很少有少于300以下的浏览器，其浏览器在渲染上也有所不同，从技术上讲，您所做的不是更轻，更透明。 – Syden

@Syden是的，我知道。到目前为止，这是我能找到的最佳解决方案。欢迎改进。 – guettli

您可以使用体积更薄的字体系列。 – Syden

编辑：这个答案是建议使用加权的font-family能够低于300，考虑到大小写的问题。

为了更好地说明它，下面的片段例如被创建：（“木里”被使用的字体族只是用于示范，并且可以在Google Fonts找到）：

body { 
 
    font-family: 'Muli', sans-serif; 
 
} 
 
.thin { 
 
    font-weight: 200; 
 
} 
 
.light { 
 
    font-weight: 300; 
 
} 
 
.regular { 
 
    font-weight: 400; 
 
} 
 
.bold { 
 
    font-weight: 600; 
 
} 
 
.extraBold { 
 
    font-weight: 700; 
 
} 
 
.black { 
 
    font-weight: 800; 
 
} 
 
.extraBlack { 
 
    font-weight: 900; 
 
}

<link href="https://fonts.googleapis.com/css?family=Muli:200,300,400,600,700,800,900" rel="stylesheet"> 
 
<p class="thin">weight 200</p> 
 
<p class="light">weight 300</p> 
 
<p class="regular">weight 400</p> 
 
<p class="bold">weight 600</p> 
 
<p class="extraBold">weight 700</p> 
 
<p class="black">weight 800</p> 
 
<p class="extraBlack">weight 900</p>

来源

2017-01-09 13:53:08 Syden

是的，太好了。如果你的字体支持'font-weight'，这将起作用。如果字体不支持，我该怎么办？ – guettli

我不知道文本的颜色。 CSS样式不在我的模块中完成。这就是我使用不透明度的原因。请继续告诉我我做错了什么。如果有更好的解决方案，我很好奇。 – guettli

@Sydon问题的分离：我不知道底层字体。我可以通过更改字体大小或粗体制作一些样式。但是我现在不用字体类型的颜色。 – guettli

CSS：工作围绕“字体重量：轻”不工作

背景

回答

相关问题