CODEWITHSUNDEEP
htmlcss
Haroldo
Haroldo

Reputation: 37377

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

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; }

Upvotes: 2

Views: 270

Answers (2)

demoncodemonkey
demoncodemonkey

Reputation: 11957

Based on Haroldo and Pekka's cool idea, here's some jQuery to modify the 'h1' style if the two elements have different widths.

<style type="text/css">
    h1 { font-family:Zapfino, Georgia, Serif; font-size:30pt; }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        if (hasRequiredFont())
            $('h1').css('font-size', '20pt');
    });
    function hasRequiredFont() {
        return ($('#font_test1').outerWidth() != $('#font_test2').outerWidth());
    }
</script>

<body>
    <p id="font_test1" style="font-family: Zapfino, 'Arial Narrow';
       display:inline-block; position:absolute; left:-9999px">MMMMM</p>
    <p id="font_test2" style="font-family: 'Arial Narrow';
       display:inline-block; position:absolute; left:-9999px">MMMMM</p>

    <h1>Testing</h1>
</body>

Upvotes: 0

Haroldo
Haroldo

Reputation: 37377

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>

Upvotes: 2

Related Questions