巧妙的想法:如何声明不同字体的不同尺寸？@字体-面？

Question

我从没见过这样的事，但我有种感觉，一定有一种聪明的方法。

css字体大小的调整看起来好像从来就不是这样，但是当我环顾四周的时候，我看到了一些非常巧妙的css技术正在进行中。

以昨天在nettuts上的这为例，将@字体脸用于矢量图标。

我的挑战(注意到2种不同的字体大小)：

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

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

Answer 1

这个能行吗？

这是我能想到的最好的了，但我真的很想避免.

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

Answer 2

基于Haroldo和Pekka的酷创意，这里有一些jQuery来修改'h1‘样式，如果这两个元素有不同的宽度。

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