Modification du corps Font-Taille basée sur Font-famille avec jQuery

Question

J'essaie d'utiliser Myriad Pro comme ma police principale avec Arial et comme une chute en arrière comme si:

font: 13px "Myriad Pro", "Helvetica", "Arial", "sans-serif"; 

Je veux changer la taille de police quand Arial ou Helvetica sont sélectionnés. C'est ce que je jQuery, mais il ne fonctionne pas:

$(function(){ 
    if ($("body").css("font") == "Arial") { 
    $("body").css("font", "10px"); 
}; 
}); 

Je vous remercie de votre temps, l'aide et la générosité :)

Answer 1

Vous ne pouvez pas détecter ce que la police est utilisée pour rendre le texte. Le style n'est pas modifié en fonction des polices disponibles.

Ce que vous pouvez faire est de mesurer la taille d'un élément qui contient du texte, et de déterminer quelle police peut être utilisée pour rendre le texte.

(Il faut aussi considérer que l'utilisateur réglage de la taille de la police peut aussi affecter la façon dont il est rendu.)

Answer 2

Ma solution est le long des lignes de ce que suggère @Guffa, mais je voudrais créer un couple de différent, peut-être même caché si cela fonctionne dans tous les navigateurs, les conteneurs avec le même texte. Utilisez des classes pour définir la police pour les différentes combinaisons - une avec, une sans Myriad Pro. Comparez les hauteurs de ces deux conteneurs. Si elles sont identiques, vous savez qu'elles sont rendues avec les polices de secours. Dans Safari 4, j'obtiens 16 et 15, respectivement.

Exemple:

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

Answer 3

JavaScript ne dispose pas d'un moyen officiellement prise en charge de la détection des polices, mais cette bibliothèque est une solution décente: http://www.lalit.org/lab/javascript-css-font-detect

En utilisant ce détecteur, vous pouvez utiliser:

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

Notez également que vous devez uniquement modifier la propriété font-size. Si vous modifiez la propriété font, vous remplacez votre taille de police et vos familles de polices.

Answer 4

if($("body").css("font-family").indexOf("Arial") > -1 
    || $("body").css("font-family").indexOf("Helvetica") > -1) { 
    $("body").css("font-size", "12px"); 
} 

Cela fonctionne parfaitement. Je ne sais pas pourquoi le gars qui l'a posté a choisi de le supprimer ..

Editer: NickFitz est correct car il ne fonctionne pas en effet. J'ai été stupide, excité et j'ai ignoré les mauvais changements qu'il faisait.

Answer 5

L'exemple de tvanfosson fonctionne réellement. Vous devrez utiliser la largeur au lieu de la hauteur pour comparer les polices. Vous voudrez également rendre la deuxième police de la liste de polices arial (ou la police de repli que vous voulez utiliser). Après cela, il suffit de comparer les largeurs, et si elles sont les mêmes, vous saurez que qu'il utilise arial dans les deux cas:

<style type="text/css"> 
    .segoeUI 
    { 
     font: 13px "Segoe UI" , "Arial", "sans-serif"; 
     display: none; 
    } 
    .lucidaGrande 
    { 
     font: 13px "Lucida Grande" , "Arial", "sans-serif"; 
     display: none; 
    } 
    .arial 
    { 
     font: 13px "Arial" , "sans-serif"; 
     display: none; 
    } 
</style> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     var sWidth = $('.segoeUI').width(); 
     var aWidth = $('.arial').width(); 
     var lWidth = $('.lucidaGrande').width(); 

     alert('Segoe: ' + sWidth + ' Arial: ' + aWidth + ' Lucida: ' + lWidth); 
    }); 
</script> 

J'utilise ceci pour éventuellement charger une feuille de style qui utilisera une taille de police différente si le segoe n'est pas disponible. Raison d'être que segoe UI est trop petit à 11px et les deux autres polices sont trop grandes à 12px. Depuis Segoe UI et Lucida Grande ont une meilleure lisibilité, j'essaie d'utiliser ces premiers. En les comparant à arial, je sais s'ils sont présents sur le système, grâce à tvanfosson.

Answer 6

fonction jquery très simple:

function changeFont(element, fontFamily, fontSize) 
{ 
    var hh = $(element).height(); 
    $(element).css("font-family", fontFamily); 
    if ($(element).height() != hh) 
     $(element).css("font-size", fontSize); 
} 

échantillon

:

changeFont("body", "B Koodak, B Nazanin, Tahoma", "13pt"); 

Answer 7

Tout ce que j'ai lu sur cette page jusqu'à présent me terrifie! Je suis préoccupé par les tailles de texte vacillantes, le comportement étrange du navigateur, le désalignement partout en raison des conditions de course avec d'autres tailles d'éléments en fonction des tailles. Le problème sous-jacent est que les différentes polices ont des tailles différentes, même pour la même taille de point. Vous devez donc comprendre comment les polices différentes se comportent pour voir si elles sont dans les tolérances acceptables.

Je suis venu avec le testeur de police rapide et sale. Il suffit de coller le tout en haut de votre page Web à l'intérieur de la balise <BODY> et cliquez sur un nom de police pour passer à cette police. Testez-le sur Mac + PC + iPad et sur les navigateurs que vous souhaitez prendre en charge. Supprimez simplement les polices de votre liste de polices qui brisent de façon dramatique votre conception. N'oubliez pas que si certaines parties de votre page sont plus critiques, essayez d'utiliser Arial pour ces sections.

<ul id="fontList" style="position:absolute; top: 500px; color: red"> 
    <li>Segoe UI Medium</li> 
    <li>Segoe UI</li> 
    <li>Trebuchet MS</li> 
    <li>Trebuchet</li> 
    <li>Lucida Grande</li> 
    <li>Tahoma</li> 
    <li>Arial</li> 
    <li>Sans-Serif</li> 
</ul> 


<script> 
    $('#fontList li').assertNonEmpty().click(function() { 
     $('body').css('font-family', $(this).html()); 
    }); 
</script> 

Test it out on JSFiddle.com < - cliquez sur les noms des polices rouges dans la zone en bas à droite