CSS中的回退字体权重_Css_Fonts_Sass_Styles

CSS中的回退字体权重

css fonts sass

CSS中的回退字体权重,css,fonts,sass,styles,Css,Fonts,Sass,Styles,我的字体样式表托管在Fonts.com上，我无法控制。在样式表上，Avenir的不同权重被实现为不同的字体系列，每个字体系列的权重为400。如果权重不是默认的normal（400），则字体呈现异常。那么，我如何使我的备用字体加粗，同时保持主字体的重量正常我试图通过使用fontCSS速记来实现这一点，我认为可以为每个逗号分隔的值定义不同的权重，如下所示： font: normal 400 18px 'Avenir 85 Heavy', normal 800 18px 'Ca

我的字体样式表托管在Fonts.com上，我无法控制。在样式表上，Avenir的不同权重被实现为不同的字体系列，每个字体系列的权重为400。如果权重不是默认的

normal

（

），则字体呈现异常。那么，我如何使我的备用字体加粗，同时保持主字体的重量正常

我试图通过使用

font

CSS速记来实现这一点，我认为可以为每个逗号分隔的值定义不同的权重，如下所示：

font:   normal 400 18px 'Avenir 85 Heavy',
        normal 800 18px 'Calbri',
        normal 800 18px sans-serif;

但不幸的是，浏览器无法识别此结构，除非我在回退中除去

之外的所有属性。任何建议，即使是不雅的建议？

当使用

@font-face

时，您通常希望应用不同的字体变体（=不同的字体文件），这取决于您的字体是（1）

normal

，（2）

italic

，（3）

bold

还是（4）

italic

+/code>bold

如果在

@font-face

定义中为每个变体使用相同的字体系列名称及其相应的

字体样式

和

字体重量

，将根据元素的

字体样式

和

字体重量

自动选择正确的字体文件

对使用

@font-face

定义的所有字体执行此操作，其行为应符合预期

演示

@font-face{
字体系列：“Droid衬线”；
字体风格：普通；
字体大小：400；
src:local（'Droid Serif'），
本地（'DroidSerif'），
网址(https://fonts.gstatic.com/s/droidserif/v6/0AKsP294HTD-nvJgucYTaI4P5ICox8Kq3LLUNMylGO4.woff2)
格式（'woff2'）；
}
@字体{
字体系列：“Droid衬线”；
字体风格：普通；
字号：700；
src:local（'Droid衬线粗体'），
本地（'DroidSerif-Bold'），
网址(https://fonts.gstatic.com/s/droidserif/v6/QQt14e8dY39u-eYBZmppwYlIZu-HDpmDIZMigmsroc4.woff2)
格式（'woff2'）；
}
@字体{
字体系列：“Droid衬线”；
字体：斜体；
字体大小：400；
src:local（'Droid衬线斜体'），
本地（'DroidSerif-Italic'），
网址(https://fonts.gstatic.com/s/droidserif/v6/cj2hUnSRBhwmSPr9kS5898u2Q0OS-KeTAWjgkS85mDg.woff2)
格式（'woff2'）；
}
@字体{
字体系列：“Droid衬线”；
字体：斜体；
字号：700；
src:local（'Droid衬线粗体斜体'），
本地（'DroidSerif-BoldItalic'），
网址(https://fonts.gstatic.com/s/droidserif/v6/c92rD_x0V1LslSFt3-QEpo9ObOXPY1wUIXqKtDjSdsY.woff2)
格式（'woff2'）；
}
身体{
字体系列：“Droid Serif”，佐治亚州，Serif；
}
.bold、{
字号：700；
}
.斜体，.两个{
字体：斜体；
}

标题
这是一个包含一些粗体文本、一些斜体文本和一些粗体和斜体文本的段落
根据文本是否为粗体、斜体或两者兼有，同一字体系列将使用不同的字体

使用

@font-face

时，通常需要应用不同的字体变体（=不同的字体文件），具体取决于您的字体是（1）

normal