ingénieuse idée nécessaire: comment déclarer différentes tailles pour différentes polices? @ font-face?

Je n'ai jamais vu cela, mais j'ai l'impression qu'il doit y avoir une façon intelligente de le faire. Css font-size-adjust semble ne jamais avoir été conçu, mais quand je regarde autour de moi, je vois des techniques très ingénieuses de css.ingénieuse idée nécessaire: comment déclarer différentes tailles pour différentes polices? @ font-face?

Prenez this sur les nettuts hier pour utiliser @ font-face pour les icônes vectorielles.

mon défi (avis 2 différentes tailles de police):

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

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

Source

2010-04-26 Haroldo

Il est impsosible en CSS pur. Voir la réponse de Haroldo pour une approche JS. –

pourrait-il fonctionner?

il est le meilleur que je peux penser, mais id comme pour éviter le style js vraiment ....

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

Source

2010-04-26 17:35:36 Haroldo

+1 c'est l'astuce. Je pense qu'un moyen encore plus fiable serait d'avoir deux divs, un 'calibri, arial', un' arial'. S'ils ont la même largeur, calibri n'est pas installé. Sinon, c'est. –

c'est gentil, bonne réflexion – Haroldo

Bonne idée, je l'aime bien. – demoncodemonkey

Basé sur bonne idée de Haroldo et Pekka, voici quelques jQuery pour modifier le « h1 » si le deux éléments ont des largeurs différentes.

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

Source

2011-10-20 23:28:07 demoncodemonkey

ingénieuse idée nécessaire: comment déclarer différentes tailles pour différentes polices? @ font-face?

Répondre

Questions connexes