Zmiana ciała font-size oparte na font-family z jQuery

Question

Próbuję użyć Myriad Pro jak mój czcionki podstawowej z Arial i takie jak fall-back tak:

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

Chcę zmienić rozmiar czcionki po wybraniu Arial lub Helvetica. To jest to, co mam w jQuery, ale to nie działa:

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

cenię swój czas, pomoc i hojność :)

Answer 1

Nie można wykryć co czcionka jest używana do renderowania tekstu. Styl nie zmienia się w zależności od tego, jakie czcionki są dostępne.

Co można zrobić, to zmierzyć rozmiar elementu zawierającego tekst, a następnie zmniejszyć czcionkę, która może być użyta do renderowania tekstu.

(Zastanów się również, że ustawienie rozmiaru czcionki, użytkownik może również wpływać na to renderowane.)

Answer 2

Moje rozwiązanie jest wzdłuż linii, co sugeruje @Guffa, ale chciałbym utworzyć kilka różnych, być może nawet ukryte jeśli to działa we wszystkich przeglądarkach, kontenery z tym samym tekstem. Użyj klas, aby ustawić czcionkę dla różnych kombinacji - jednej z, jednej bez Myriad Pro. Porównaj wysokości tych dwóch pojemników. Jeśli są takie same, to wiesz, że są renderowane przy użyciu czcionek zastępczych. W Safari 4 otrzymuję odpowiednio 16 i 15.

Przykład:

<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 nie ma oficjalnie wspierany sposób wykrywania czcionek, ale ta biblioteka jest przyzwoity obejście: http://www.lalit.org/lab/javascript-css-font-detect

Stosując ten detektor, można użyć:

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

Należy również pamiętać, że należy zmienić tylko właściwość font-size. Jeśli zmienisz właściwość font, nadpiszesz zarówno rozmiar czcionki, jak i rodziny czcionek.

Answer 4

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

To działa idealnie. Nie wiem, dlaczego facet, który je zamieścił, zdecydował się go usunąć.

Edytuj: NickFitz jest poprawny, ponieważ w rzeczywistości nie działa. Głupia, podekscytowana i przeoczyła złe zmiany, które wprowadzała.

Answer 5

Przykład z tvanfosson faktycznie działa. Musisz jednak użyć szerokości zamiast wysokości, aby porównać czcionki. Będziesz także chciał zrobić drugą czcionkę z listy czcionek (lub jakiejkolwiek innej czcionki, której chcesz użyć). Potem wystarczy porównać szerokości, a jeśli są one takie same, będziesz wiedzieć, że używa Arial w obu przypadkach:

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

Używam tego opcjonalnie załadować inny arkusz stylów, który będzie korzystał z innego rozmiaru czcionki jeśli segoe nie jest dostępny. Powód jest taki, że interfejs użytkownika segoe jest zbyt mały na poziomie 11 pikseli, a pozostałe dwie czcionki są zbyt duże na poziomie 12 pikseli. Ponieważ Segoe UI i Lucida Grande mają lepszą czytelność, staram się je wykorzystać jako pierwsze. Porównując je do arialu, wiem, że dzięki systemowi tvanfosson są one obecne w systemie.

Answer 6

bardzo prosta funkcja jQuery:

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

próbki:

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

Answer 7

Wszystko Czytałem na tej stronie tak daleko mnie przeraża! Jestem zaniepokojony migotaniem rozmiarów tekstu, dziwnym zachowaniem przeglądarki, niewspółliniowaniem w każdym miejscu ze względu na warunki wyścigu z innymi rozmiarami elementów na podstawie rozmiarów.

Podstawowym problemem jest to, że różne czcionki mają różne rozmiary, nawet dla tego samego rozmiaru punktu - więc musisz zrozumieć, jak różne czcionki zachowują się, aby sprawdzić, czy mieszczą się w dopuszczalnych tolerancjach.

Wymyśliłem szybki i brudny tester czcionek. Wystarczy umieścić go na górze strony w tagu <BODY> i kliknąć nazwę czcionki, aby przełączyć się na tę czcionkę. Przetestuj go na Macu + PC + iPadzie i dowolnych przeglądarkach, które potrzebujesz obsługiwać. Po prostu usuń czcionki z listy czcionek, które dramatycznie złamią twój projekt.

Pamiętaj, że jeśli część stron jest bardziej krytyczna, spróbuj użyć Arial dla tych sekcji.

<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 < - kliknij na czerwone nazw czcionek w prawym dolnym polu