Ce que la dépendance entre la police la taille et la largeur du char de police à espacement fixe?

Ce que la dépendance entre la police la taille et la largeur du char de police à espacement fixe? Dans mon web-application que j'utilise le "courier new" de la police. Je veux savoir, ce que vraiment la longueur en pixels de la chaîne? Si je sais css font-size propriété, comment peut-il m'aider à savoir vraiment la longueur de la chaîne? Grâce

  • C'est quelque chose que JavaScript peut déterminer si vous ne trouvez pas une autre solution. Fondamentalement, il vous suffit de mettre la chaîne à l'intérieur d'un vide et non stylé div, et puis vous interrogez la div de l'élément de taille pour obtenir la largeur de il.
  • oui, j'y ai pensé... Cependant, j'ai essayer de trouver plus d'élégance de la solution.
InformationsquelleAutor vicpro | 2013-10-01
  1. 6

    Chaque police à espacement fixe ses propres ratio entre la longueur de pixel et la taille de police. Mais puisque nous, l'idéal serait d'exprimer famille de polices de plusieurs options pour donner le navigateur une large gamme pour satisfaire le style (dans le cas où il n'a pas la police requis), cette méthode peut être imparfaite, même si vous trouvez le rapport. Qui est-à-dire que "Courier New" a le même espacement/de dimensionnement/... sur un appareil que sur un autre?

    Un moyen sûr de dire que c'est à l'utilisation de JavaScript, clone de l'élément et de vérifier la taille des valeurs à la volée.

    prendre un coup d'oeil à ce violon pour un exemple de cette

    http://jsfiddle.net/zUFwx/ (références de code 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);
    • Le code indique la taille de l'ensemble de la <div> élément, et non le texte. Si vous modifiez le texte, la taille ne change pas, mais si vous modifiez la taille de l'image sur laquelle il s'exécute, il n'.
    InformationsquelleAutor Stephen James
  2. 4

    La dépendance entre la taille de police et la largeur des caractères (glyphes) dans une police à espacement fixe est défini par le concepteur de la police.

    Par exemple, sur Windows 7, la largeur d'avance de glyphes de la police de caractères Courier New est 1229 unités. Depuis la hauteur de la police est de 2048 unités, de la largeur d'avance est donc très, très près de 60% de la taille de la police, de sorte que dans le CSS, 0.6em serait une quantité suffisante pour la largeur des glyphes à toutes fins pratiques.

    Dans Lucida Console, de la largeur d'avance est presque le même: 1234 unités. Mais dans Consolas, d'autre part, il est beaucoup plus petit, 1126 unités.

    Les conclusions dépendent donc du contexte, en particulier sur la question de savoir si votre application est destinée à être exécuté uniquement dans les situations où une police spécifique est disponible (et vos paramètres ne seront pas ignorées par les utilisateurs).

    • Selon cette page web "Un rapport largeur / hauteur de 3:5 (0.6) est recommandé pour la plupart des applications.", ce qui serait de 60% plainlanguagenetwork.org/type/utbo211.htm
    • Le ROC-UNE police semble avoir la largeur/hauteur = 715/1000.
    InformationsquelleAutor Jukka K. Korpela
  3. 0

    pardonnez-moi si je suis en train de faire chose de complètement faux comme je l'ai été pour un certain temps maintenant, mais c'est la première fois que j'ai contribué.

    C'était quelque chose qui était sur écoute-moi et @Stephen James a vraiment cloué pour ce que j'étais en train de réaliser.

    J'ai eu quelques problèmes à la faire fonctionner et a constaté que le CSS dans votre violon a été incorrect

    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; */
}

    J'ai commenté tout mais la position dans le sizingClone classe que je l'ai trouvé inutile.

    Cela fonctionne à présent parfaitement

    InformationsquelleAutor doz87