Changer de police corporelle basée sur la famille avec jQuery

Vous ne pouvez pas détecter quelle police est utilisée pour rendre le texte. Le style n'est pas changé en fonction de quelles polices sont disponibles.

Ce que vous pouviez faire est de mesurer la taille d'un élément contenant du texte et de cela découpez quelle police pourrait être utilisée pour rendre le texte.

(Considérez également que le paramètre utilisateur pour la taille de la police peut également affecter la manière dont elle est rendue.)

Ma solution est le long des lignes de ce que @guffa suggère, mais je créerais un couple de différents, peut-être même caché si cela fonctionne dans tous les navigateurs, des conteneurs avec le même texte. Utilisez des classes pour définir la police sur les différentes combinaisons - une avec, une sans Myriad Pro. Comparez les hauteurs de ces deux conteneurs. S'ils sont les mêmes, vous savez que cela est rendu avec les polices de secours. Dans safari 4, j'ai 16 ans et 15, respectivement.

Exemple: P>

<style type="text/css">
    .myriad {
        font: 13px "Myriad Pro", "Helvetica", "Arial", "sans-serif";
            display: none;
    }
    .arial {
        font: 13px "Arial", "sans-serif";
            display: none;
    }
</style>
<script type="text/javascript" language="javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var mHeight = $('.myriad').height();
    var aHeight = $('.arial').height();

    alert( 'M: ' + mHeight + ' ' + 'A: ' + aHeight );
});
</script>

<p class="myriad">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla non purus et tortor rhoncus ultricies.
</p>
<p class="arial">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla non purus et tortor rhoncus ultricies.
</p>

JavaScript n'a pas de manière officielle de détection de polices, mais cette bibliothèque est une solution de contournement décente: http://www.lalit.org/lab/javascript-csss-font-detect

Utilisation de ce détecteur, vous pouvez ensuite utiliser: P>

$(function(){
  var fontDetector = new Detector();
  if(fontDetector.test('Arial')){
    $('body').css('font-size', '10px');
  }
});

if($("body").css("font-family").indexOf("Arial") > -1 
   || $("body").css("font-family").indexOf("Helvetica") > -1) {
   $("body").css("font-size", "12px");
}
This works perfectly. I don't know why the guy who posted it chose to delete it..Edit: NickFitz is correct as it indeed does not work. Silly me, got excited and overlooked the wrong changes it was making.