Cambiare corpo dimensione carattere sulla base di Font-famiglia con jQuery

Question

Sto cercando di usare Myriad Pro come il mio carattere primaria con Arial e, come un ripiego in questo modo:

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

voglio cambiare la dimensione del carattere quando sono selezionati Arial o Helvetica. Questo è quello che ho in jQuery ma non funziona:

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

Apprezzo il vostro tempo, aiuto e la generosità :)

Answer 1

Non si può rilevare quale tipo di carattere utilizzato per il rendering del testo. Lo stile non è cambiato in base a quali tipi di carattere sono disponibili.

Quello che si potrebbe fare è misurare la dimensione di un elemento che contiene del testo e da questo decifra quale tipo di carattere potrebbe essere usato per rendere il testo.

(Si consideri inoltre che l'impostazione per le dimensioni del font utente inoltre può influenzare quel che ne risulta.)

Answer 2

La mia soluzione è sulla falsariga di quello che suggerisce @Guffa, ma vorrei creare un paio di diverso, forse anche nascosto se funziona in tutti i browser, contenitori con lo stesso testo. Utilizza le classi per impostare il carattere sulle diverse combinazioni: una con, una senza Myriad Pro. Confronta le altezze di questi due contenitori. Se sono uguali, allora sai che viene eseguito il rendering con i caratteri di fallback. In Safari 4, ottengo rispettivamente 16 e 15.

Esempio:

<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 non dispone di un modo ufficialmente supportata di rilevare i caratteri, ma questa biblioteca è una soluzione decente: http://www.lalit.org/lab/javascript-css-font-detect

Utilizzando questo rivelatore, è possibile utilizzare:

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

Si noti inoltre che è necessario modificare solo la proprietà font-size. Se si modifica la proprietà font, si sovrascrivono sia la dimensione del carattere sia le famiglie di caratteri.

Answer 4

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

Questo funziona perfettamente. Non so perché il tizio che l'ha pubblicato ha scelto di eliminarlo ..

Modifica: NickFitz è corretto in quanto in effetti non funziona. Sciocco me, mi sono emozionato e ho trascurato i cambiamenti sbagliati che stava facendo.

Answer 5

L'esempio di tvanfosson funziona effettivamente. Avrai bisogno di usare larghezza invece di altezza per confrontare i caratteri. Dovrai anche creare il secondo carattere della lista dei caratteri arial (o qual è il font che vuoi usare). Dopo che mettono a confronto semplicemente la larghezza, e se sono gli stessi, saprete che si sta usando Arial in entrambi i casi:

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

Io lo uso per facoltativamente caricare un foglio di stile diverso che utilizzerà una dimensione di carattere diverso se segoe non è disponibile. La ragione è che l'interfaccia utente di segoe è troppo piccola a 11px e gli altri due caratteri sono troppo grandi a 12px. Poiché Segoe UI e Lucida Grande hanno una migliore leggibilità, cerco di usarli per primi. Confrontandoli con arial, so se sono presenti sul sistema, grazie a tvanfosson.

Answer 6

una semplice funzione di jQuery:

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

campione:

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

Answer 7

Tutto quello che ho letto su questa pagina finora mi terrorizza! Sono preoccupato per le sfarfallio delle dimensioni del testo, lo strano comportamento del browser, il disallineamento dappertutto a causa delle condizioni di gara con altri dimensionamenti di elementi in base alle dimensioni.

Il problema di fondo è che i diversi tipi di carattere hanno dimensioni diverse anche per le stesse dimensioni dei punti - quindi è necessario capire come si comportano i diversi tipi di carattere per vedere se sono entro tolleranze accettabili.

mi è venuto in mente il seguente tester di font veloce e sporco. Basta incollarlo nella parte superiore della pagina Web all'interno del tag <BODY> e fare clic sul nome di un carattere per passare a quel tipo di carattere. Provalo su Mac + PC + iPad e su qualsiasi browser devi supportare. Basta rimuovere i caratteri dall'elenco dei caratteri che interrompono drasticamente il tuo design.

Ricordare se alcune parti della pagina sono più critiche, provare ad utilizzare Arial per tali sezioni.

<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 < - clicca sui nomi dei font rosse nella casella in basso a destra