html - 基于字体粗细的 CSS 选择器？

Question

是否可以创建一个选择器来识别具有特定 HTML 字体粗细属性的元素？

类似于(假 示例):

div[font-weight^='900']{
    font-family:"HaasGrotDisp55Roman";
}
div[font-weight^='500']{
    font-family:"HaasGrotDisp35Thin";
}

w/font-face css 定义为:

@font-face {
    font-family: 'HaasGrotDisp35Thin';
    src: url('fonts/neuehaasgrotdisp-35thin.eot');
}
@font-face {
    font-family: 'HaasGrotDisp55Roman';
    src: url('fonts/neuehaasgrotdisp-55roman.eot');
}

Answer 1

您可以执行以下操作:

/* Your fonts */
@font-face {
    font-family: 'HaasGrotDisp';
    src: url('fonts/neuehaasgrotdisp-35thin.eot');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'HaasGrotDisp';
    src: url('fonts/neuehaasgrotdisp-55roman.eot');
    font-weight: 900;
    font-style: normal;
}

body { font-family: "HaasGrotDisp" }

h1,h2,h3 { font-weight: 900 }

这将它缩小到只有一个字体系列。只需在您的@font-faces 中分配不同的权重

至于您的查询属性:我建议使用语义类将其与 div 一起使用。