ingenious idea needed: how to declare different sizes for different fonts? @font-face?

Question

I've never seen this done, but i get a feeling that there's gotta be a clever way of doing it.

css font-size-adjust looks like it was never meant to be, but when i look around I'm seeing some really ingenious css techniques going on.

Take this on nettuts yesterday for using @font-face for vector icons.

my challenge (notice the 2 different font sizes):

if(user has calibri ) { font-family: calibri; font-size: 12px; }

if(user hasn't calibri ) { font-family: arial; font-size: 10px; }

Answer 1

could this work?

it's the best i can think of, but id like to avoid js really....

<p id="font-test" style="font-family: calibri, arial; display:inline-block;">MMMMM</p>

<script>
var width = $('#font_test').attr('width');
if( width > x ){
    var has_calibri = false;
}
else{
    var has_calibri = true;
}
</script>