基于font-weight的CSS Selector？

Question

Is it possible to create a selector that would identify elements with specific HTML font-weight properties?

Something like ( fake example):

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

w/ font-face css definitions as:

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

Answer 1

Nope. Add classes to elements so that you can apply certain font-weight's to those elements. Use those same classes for to "identify" elements that have a certain font-weight. That's how CSS works.

Answer 2

You could do the following:

/* 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 }

This minifies it to only one font-family. Simply assign the different weights inside your @font-faces

And as for your attribute like query: I would suggest using semantic classes to use it with divs.

Answer 3

as far as I know, css selector will work on element name or attributes, but not css. besides, even if it were possible, it would be strongly discouraged to do so. instead you can define class for each font face, and apply class to approriate div's, and search div's with those classes.

eg)

`
    .Haas {
      font-family: '...';
    }
    .Neue {
      font-family: '...';
    }

    ...
    <div class="some_class Haas">....
`