Was die Abhängigkeit zwischen den font-size und die Breite der char in monospace-schriftart?

Welche Abhängigkeit zwischen Schriftgröße und die Breite der char in monospace-schriftart? In meiner web-Anwendung verwende ich "courier new" font. Ich will wissen, was wirklich Länge in Pixel string? Wenn ich weiß, css-font-size-Eigenschaft, wie kann es mir helfen zu wissen, die Länge der Zeichenfolge? Dank

  • Das ist etwas JavaScript kann man bestimmen, ob man nicht eine andere Lösung finden. Im Grunde, Sie setzen Sie einfach die Zeichenfolge in einem leeren und unstyled div, und dann Fragen Sie die div element Größe, um die Breite.
  • ja, ich habe daran gedacht... Allerdings habe ich versucht zu finden, mehr Eleganz-Lösung.
InformationsquelleAutor vicpro | 2013-10-01
  1. 6

    Jeder monospace-schriftart hätte seine eigenen Verhältnis zwischen Pixelbreite und font-size. Aber da wir im Idealfall express-font-Familie ist mehrere Optionen zu geben, den browser einer breiten Palette zu erfüllen, den Stil (im Falle das es nicht die schriftart erforderlich), ist diese Methode fehlerhaft sein können, auch wenn Sie nicht das Verhältnis. Auch, wer ist zu sagen, dass "Courier New" hat den gleichen Abstand/sizing/... auf ein Gerät als auf einem anderen?

    Einen sicheren Weg, zu sagen, dies ist, JavaScript zu verwenden, duplizieren Sie das element aus, und überprüfen Sie die Werte für die Größe on the fly.

    werfen Sie einen Blick auf diese Geige ein Beispiel für diese

    http://jsfiddle.net/zUFwx/ (code Referenzen jQuery)

    function getSizeOfTextInElement(domElement) {
    var $element = $(domElement),
        $clone = $element.clone(),
        size = {
            width : 0,
            height : 0
        };

    $clone.addClass("sizingClone");

    $(document.documentElement).append($clone);

    size.width = $clone.width();
    size.height = $clone.height();

    $clone.remove();

    return size;
}

var elementToCheck = document.getElementById("checkSizeExample"),
    sizeOfElement = getSizeOfTextInElement(elementToCheck),
    message = "element has a width of " + sizeOfElement.width + "px";

$("#result").text(message);
    • Der code zeigt die Größe der gesamten <div> element, nicht der text. Wenn Sie den text ändern, die Größe nicht ändern, aber wenn Sie ändern Sie die Größe des Rahmens, wo es läuft, das tut es.
    InformationsquelleAutor Stephen James
  2. 4

    Die Abhängigkeit zwischen der font-size und die Breite der Zeichen (Glyphen) in einer monospace-schriftart ist definiert durch den font-designer.

    Beispielsweise auf Windows 7, die Laufweite der Zeichen in der schriftart Courier New ist 1229 Einheiten. Da die Höhe der schriftart liegt bei 2048 Einheiten, die Laufweite ist somit sehr, sehr nahe an 60% von der Schriftgröße, also in CSS 0.6em wäre, eine ausreichende Menge für die Breite der Glyphen, die für alle praktischen Zwecke.

    In Lucida Console, die Voraus-Breite ist fast die gleiche: 1234 Einheiten. Aber in Consolas, auf der anderen Seite, es ist wesentlich kleiner, 1126 Einheiten.

    Die Schlussfolgerungen so, hängt vom Kontext ab, vor allem auf die Frage, ob Ihre Anwendung ausgeführt werden soll nur in Situationen, in denen eine bestimmte schriftart verfügbar ist (und deine Einstellungen werden nicht überschrieben durch die Benutzer).

    • Laut dieser web-Seite "Ein Verhältnis der Breite zur Höhe von 3:5 (0.6) wird empfohlen für die meisten Anwendungen." was wäre 60% plainlanguagenetwork.org/type/utbo211.htm
    • Die schriftart OCR-A zu haben scheint, Breite/Höhe = 715/1000.
    InformationsquelleAutor Jukka K. Korpela
  3. 0

    verzeihen Sie mir, wenn ich Tue, was völlig falsch ist, wie ich schon auf SO für eine Weile jetzt, aber dies ist das erste mal, dass ich dazu beigetragen haben.

    Dies war etwas, das mich nervt und @Stephen James hat wirklich kapiert, was ich versucht habe, zu erreichen.

    Hatte ich einige Probleme bekommen es zu arbeiten und festgestellt, dass die CSS-Datei in Ihre Geige falsch war

    CSS:

    #checkSizeExample
{
font-family : Courier;
font-size : 8pt;
}



.sizingClone {                  //this was originally an id tag not a class tag
position : absolute !important;

/* top : 100% !important;
left : 100% !important;         //not sure why but this line was causing the div to
                                //expand to 100%.
visibility: hidden !important;    
width : auto;
height : auto; */
}

    Ich auskommentiert alles, aber die position in der sizingClone Klasse, da fand ich es unnötig.

    Nun funktioniert das perfekt

    InformationsquelleAutor doz87
Schreibe einen Kommentar