为font-family中的每种字体指定不同的权重

时间:2023-02-03 10:07:26

when using backup fonts in your font family sometimes you may want to use say a light weight version of futura for a replacement for century gothic, how can i spec this in my css ? normally id just write

有时在你的字体系列中使用备份字体时,你可能想要使用轻量版的futura代替世纪哥特式,我怎样才能在我的css中对此进行规范?通常id只是写

p {font-family:"century gothic", futura; font-weight:300; font-size:14px;}

but that would also make century gothic's weight 300, correct ?

但这也会使世纪哥特式的重量达到300,对吗?

3 个解决方案

#1


0  

CSS styles are applied to the selectors only. In this case it will be applied to all p tags.

CSS样式仅应用于选择器。在这种情况下,它将应用于所有p标签。

"century gothic" is not the selector here. And font-weight and font-family are completely different. They are applied on a selector.

“世纪哥特式”不是这里的选择者。而且font-weight和font-family完全不同。它们应用于选择器。

300 will not have any effect on "century gothic". It will simply change the font-weight of all paragraphs defined using p tag.

300对“世纪哥特式”不会产生任何影响。它只会改变使用p标签定义的所有段落的字体权重。

#2


0  

I think that would only be possible with Javascript.

我认为这只能通过Javascript实现。

Check this out: http://lucassmith.name/2009/05/test-if-a-font-is-installed-via-javascript.html

看看这个:http://lucassmith.name/2009/05/test-if-a-font-is-installed-via-javascript.html

Demo here: http://lucassmith.name/pub/font_installed.html

在这里演示:http://lucassmith.name/pub/font_installed.html

If the font is not installed you could set a different font-weight.

如果未安装该字体,您可以设置不同的字体粗细。

#3


0  

No, it would make font-weight equal 300, no matter what the font family is. For almost all fonts, there is no 300 version, though, so it would usually be mapped to 400 (normal). If some font has a version that corresponds to 300, as Futura (when available—it isn’t in most computers) may have, then the weight setting takes effect.

不,无论字体系列是什么,它都会使font-weight等于300。对于几乎所有字体,没有300版本,因此通常会映射到400(正常)。如果某些字体的版本对应于300,则Futura(如果可用 - 它不在大多数计算机中)可能具有,则权重设置生效。

Depending on browser and system, a light version might also be known by its own name, so something like p {font-family:"century gothic", "futura light"; font-size:14px;} might be effective. The handling of font weights is really messy in browsers.

根据浏览器和系统的不同,轻型版本也可能以其自己的名称而闻名,所以像p {font-family:“century gothic”,“futura light”; font-size:14px;}可能有效。浏览器中字体权重的处理非常混乱。

#1


0  

CSS styles are applied to the selectors only. In this case it will be applied to all p tags.

CSS样式仅应用于选择器。在这种情况下,它将应用于所有p标签。

"century gothic" is not the selector here. And font-weight and font-family are completely different. They are applied on a selector.

“世纪哥特式”不是这里的选择者。而且font-weight和font-family完全不同。它们应用于选择器。

300 will not have any effect on "century gothic". It will simply change the font-weight of all paragraphs defined using p tag.

300对“世纪哥特式”不会产生任何影响。它只会改变使用p标签定义的所有段落的字体权重。

#2


0  

I think that would only be possible with Javascript.

我认为这只能通过Javascript实现。

Check this out: http://lucassmith.name/2009/05/test-if-a-font-is-installed-via-javascript.html

看看这个:http://lucassmith.name/2009/05/test-if-a-font-is-installed-via-javascript.html

Demo here: http://lucassmith.name/pub/font_installed.html

在这里演示:http://lucassmith.name/pub/font_installed.html

If the font is not installed you could set a different font-weight.

如果未安装该字体,您可以设置不同的字体粗细。

#3


0  

No, it would make font-weight equal 300, no matter what the font family is. For almost all fonts, there is no 300 version, though, so it would usually be mapped to 400 (normal). If some font has a version that corresponds to 300, as Futura (when available—it isn’t in most computers) may have, then the weight setting takes effect.

不,无论字体系列是什么,它都会使font-weight等于300。对于几乎所有字体,没有300版本,因此通常会映射到400(正常)。如果某些字体的版本对应于300,则Futura(如果可用 - 它不在大多数计算机中)可能具有,则权重设置生效。

Depending on browser and system, a light version might also be known by its own name, so something like p {font-family:"century gothic", "futura light"; font-size:14px;} might be effective. The handling of font weights is really messy in browsers.

根据浏览器和系统的不同,轻型版本也可能以其自己的名称而闻名,所以像p {font-family:“century gothic”,“futura light”; font-size:14px;}可能有效。浏览器中字体权重的处理非常混乱。