Faire de chaque personnage sur une page web de la même largeur

Est-il une police ou d'une propriété CSS qui permettrait de donner à chaque personnage de la même largeur sans avoir besoin de les dessiner vous-même(.ttf)?

InformationsquelleAutor Jay | 2011-01-14
  1. 21

    Que diriez-Courier New? monospace?

    http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

    • A beaucoup aidé. Merci.
    • Il ne fonctionne pas pour la suite de deux caractères: ▼, ▶. Au moins, Chrome, IE et Firefox va leur donner différentes largeur.
    InformationsquelleAutor Brian Erickson
  2. 36

    CSS:

    font-family: monospace;

    HTML:

    <tt>
    • veuillez s'il vous plaît ajouter une description?
    • Pour info le tt balise est obsolète en HTML5
    • tt balise HTML et est bien à l'honneur dans github hybride HTML / Markdown ... Bon à savoir, pour toute personne intéressée.
    InformationsquelleAutor Ned Batchelder
  3. 16

    Vous pu choisir à partir de la librement disponible sur les polices à largeur fixe et à les intégrer dans votre site.

    Si vous ne voulez pas intégrer une police dans votre page, vous pouvez utiliser les éléments suivants pour prendre n'importe quel monospace (un autre terme pour une largeur fixe) police est disponible:

    font-family: "Courier New", Courier, monospace;
    • Mais, serait-tous les caractères ont la même largeur? comme le "M" et "," les deux étant 5px par exemple.
    • oui - c'est ce que l'espacement moyen. C'est aussi pourquoi les polices à espacement fixe sont généralement très peu attrayant.
    • Oui. C'est tout l'intérêt d'une police à largeur fixe. Chaque personnage prend la même quantité d'espace afin que tout est aligné.
    • n'est pas si mal.
    • Comme @MichaelMullany dit, les polices à espacement fixe sont généralement très laids, trop "console" look&feel... savez-vous plus conviviaux police à chasse fixe?
    • Aucune idée si cela va fonctionner avec les caractères unicode comme les émoticônes?

    InformationsquelleAutor Justin Niessner
  4. 11

    Si vous avez uniquement besoin de chiffres pour être égales largeurs, vous pouvez utiliser font-variant-numeric: tabular-nums;. C'est vraiment utile pour animer des compteurs. En savoir plus sur Mozilla web docs.

    • Je suis venu ici pour essayer de se rappeler le peu connu propriété CSS, et déçu, ce n'est pas la accepté de répondre, quand il est clairement le meilleur 😉
    • Même que le commentaire précédent. Cette réponse doit aller plus haut!
    InformationsquelleAutor Tristan Timblin
  5. 5

    Pour certains cas, l'utilisation de la pré tag,(<pre>text</pre>), peut répondre à vos besoins pour l'espacement fixe (largeur fixe) du texte. Il a travaillé pour moi avec HTML5 + Chrome (version actuelle). Le ttélément est déprécié.

    Cependant, il apparaît que le <pre> balise ne peut contenir que des balises qui sont considérés comme des "phrasé contenu". Voir "modèle de Contenu" de la section sur la w3 documentation de cette balise. Vous pouvez cliquer sur le lien pour voir quels éléments sont considérés comme des "phrasé de contenu". Bien sûr, chaque navigateur peut prendre en charge un looser version de la spécification si vous ne se soucient pas de code HTML valide ou de la compatibilité du navigateur.

    • En effet, comme pour aujourd'hui (janvier 2018) monospace n'est pas correctement appliquée sur Android versións de Chrome et Opéra lors de l'utilisation de la <pre> tag. Sur Safari pour iPhone 4S il semble être tout droit.
    InformationsquelleAutor Bryan
  6. 2

    Il y a un certain nombre de polices à espacement fixe qui donne une largeur égale à chaque personnage. De courrier et de Messagerie Nouvelle sont probablement le plus commun, et devrait être disponible sur à peu près chaque système.

    InformationsquelleAutor Kaleb Brasee
  7. 1

    Une autre option serait d'utiliser lettering.js, qui permettrait de créer un élément span autour de chaque lettre que vous pouvez ensuite définir une largeur pour avec les css. Ce serait probablement seulement être conseillé pour des petits textes, bien que.

    InformationsquelleAutor spiral