Verändernden Körper Schriftart,-Größe, basierend auf der Schriftart-Familie mit jQuery

Ich versuche, "Myriad Pro" als meine primäre Schrift mit Arial und wie ein fall-back-etwa so:

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

Möchte ich die schriftart ändern-Größe, wenn Sie Arial oder Helvetica ausgewählt werden. Dies ist, was ich habe in jQuery, aber es funktioniert nicht:

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

Ich Schätze Ihre Zeit, Hilfe und Großzügigkeit 🙂

InformationsquelleAutor MrSplashyPants | 2009-08-13

8

JavaScript nicht über eine offiziell unterstützte Möglichkeit der Erkennung von Schriftarten, aber diese Bibliothek ist ein annehmbarer workaround: http://www.lalit.org/lab/javascript-css-font-detect

Mit diesem Detektor können Sie dann verwenden:
```
$(function(){
  var fontDetector = new Detector();
  if(fontDetector.test('Arial')){
    $('body').css('font-size', '10px');
  }
});
```
Beachten Sie auch, dass Sie sollten nur ändern, die font-size Eigenschaft. Wenn Sie ändern die font Eigenschaft überschreiben Sie die beiden font-size und font-Familien.
- Ich werde in diesem Blick als gut, vielen Dank!
InformationsquelleAutor Ron DeVera
3

Alles, was ich gelesen habe auf dieser Seite so weit mich erschreckt! Ich bin besorgt über flackernde text-Größen, seltsames browser Verhalten, Fehlausrichtung, die alle über den Ort aufgrund von Rasse Bedingungen mit anderen Dimensionierung der Elemente, basierend auf Größen.

Das zugrunde liegende problem ist, dass verschiedene Schriftarten haben unterschiedliche Größen, sogar für den gleichen Punkt-Größe - so müssen Sie verstehen, wie verschiedene Schriftarten zu Verhalten, um zu sehen, ob Sie innerhalb akzeptabler Toleranzen.

kam ich auf folgende Merkmale aufweist quick-and-dirty-font-tester. Nur kleben Sie es oben auf Ihrer Webseite innerhalb der <BODY> - tag und klicken Sie auf eine schriftart zu wechseln, die schriftart. Testen Sie es auf Mac + PC + iPad und welche Browser Sie unterstützen müssen. Entfernen Sie einfach die Schriftarten von font-Liste, die drastisch brechen Sie Ihr design.

Denken Sie daran, wenn Sie Teile Ihrer Seite, die sind eher kritisch, versuchen Sie es mit Arial für diese Abschnitte.
```
<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>
```
Testen Sie es aus auf JSFiddle.com <-- klicken Sie auf die rote Schrift die Namen in der unteren rechten box

InformationsquelleAutor Simon_Weaver

eine sehr einfache jquery-Funktion :

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

Beispiel :

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

InformationsquelleAutor Bahman.Akbarzade

1

Können Sie nicht feststellen, welche Schrift verwendet wird der text wiedergegeben. Der Stil ist nicht entsprechend geändert, was die Schriftarten verfügbar sind.

Was Sie tun können, ist zu Messen die Größe ein element, das text enthält, und von diesem decuce welche schriftart verwendet werden könnte, um den text gestalten.

(Beachten Sie auch, dass der Benutzer die Einstellung für die font-Größe auch beeinflussen können, wie Sie dargestellt werden.)
- Anderen Herr gerade gepostet und gelöscht die Antwort? Es funktionierte perfekt...
InformationsquelleAutor Guffa

Meine Lösung ist entlang der Linien von dem, was @Guffa schlägt, aber ich würde ein paar verschiedene, vielleicht sogar versteckt, wenn das in allen Browsern funktioniert, der Behälter mit dem gleichen text. Verwenden Sie Klassen, um die schriftart festlegen, auf die verschiedenen Kombinationen-eine mit, eine ohne "Myriad Pro". Vergleichen Sie die Höhen der beiden Container. Wenn Sie identisch sind, dann wissen Sie, es ist gerendert, mit den fallback-Schriften. In Safari 4, bekomme ich 16 und 15, beziehungsweise.

Beispiel:

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

InformationsquelleAutor tvanfosson

Beispiel von tvanfosson tatsächlich funktioniert. Sie brauchen die Breite statt Höhe, obwohl zu vergleichen die Schriften. Sie wollen auch auf die zweite schriftart aus der Liste schriftart arial (oder was auch immer fall-back schriftart, die Sie verwenden möchten). Danach vergleichen Sie einfach die Breite, und wenn Sie gleich sind, werden Sie wissen, dass es mit arial in beiden Fällen:

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

Ich diese nutzen, um Optional laden Sie ein anderes Stylesheet benutzen, eine andere Schriftgröße, wenn segoe ist nicht verfügbar. Grund dafür ist, dass segoe UI ist zu klein 11px und die beiden anderen Schriften sind zu groß auf 12px. Da Segoe UI und Lucida Grande bessere Lesbarkeit, ich versuche, verwenden Sie diese zuerst. Im Vergleich zu arial, die ich kenne, ob Sie auf dem system, Dank tvanfosson.

InformationsquelleAutor

0
```
if($("body").css("font-family").indexOf("Arial") > -1 
   || $("body").css("font-family").indexOf("Helvetica") > -1) {
   $("body").css("font-size", "12px");
}
```
Dieser funktioniert perfekt. Ich weiß nicht, warum der Kerl, der das gepostet hat, wählte, um es zu löschen..

Edit: NickFitz ist richtig, da es ja nicht funktioniert. Ich Dummerchen, habe aufgeregt und übersehen die falschen änderungen wurde es macht.
- Ich denke indexOf ist und behandeln Sie es als ein array und damit die Suche nach einem passenden Ergebnis? aber was ist mit dem "> -1" Teil?
- Ich denke, dass er es gelöscht weil es nicht funktioniert. Als font-Familie string beinhaltet sowohl Arial und Helvetica, indexOf wird immer wieder ein Wert > -1 und Ihre font-size wird immer auf 12px. Auf deiner Beispiel-Seite, legen Sie die font-size um so etwas banales wie 24px in CSS, und sehen diese Funktion setzen Sie es auf 12px. Alternativ, es funktioniert nur in dem browser, den Sie testen wollen, aber ich glaube nicht, dass es funktionieren wird, in irgendeinem browser". indexOf" ist eine string-Methode, die ist dokumentiert in einer Reihe von Orten, wie developer.mozilla.org/en/Core_JavaScript_1.5_Reference/...
InformationsquelleAutor MrSplashyPants

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.