Comment obtenir une zone de texte HTML avec du texte monospace à l'aide de CSS ?

Question

C'est peut-être une question stupide, mais je n'arrive pas à trouver comment faire en sorte que ma zone de texte utilise une police monospace.

Answer 1

Si j'ai bien compris, il devrait déjà hériter des styles par défaut de l'agent utilisateur, mais si vous voulez le faire explicitement, il suffit de spécifier une famille de caractères (styles tirés de la feuille de style de Stackoverflow).

textarea {
  border:1px solid #999999;
  font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
}

Spécifiez d'abord les familles de polices les plus spécifiques (spécifiques à un espace), et si l'agent utilisateur ne les a pas, il continuera à les essayer jusqu'à la fin, auquel cas il utilisera par défaut la famille de polices de l'agent utilisateur pour cet élément, s'il en a spécifié une.

Answer 2

Vous pouvez également utiliser le générique standard font-family: monospace mais faites attention, il y a des grave effets secondaires (malheureusement) dans Chrome, Safari et tout ce qui est basé sur WebKit.

voir :

• http://webkit.org/blog/67/strange-medium/
• http://archivist.incutio.com/viewlist/css-discuss/103606

Answer 3

Utilisez simplement une police monospace. Par exemple pour quelque chose comme :

<textarea id="mytextarea"></textarea>

le css serait :

#mytextarea {
    font-family: monospace;
}

Si vous souhaitez utiliser une police monospace spécifique, vous pouvez le faire, mais n'oubliez pas d'ajouter le terme générique "monospace" à la fin au cas où l'utilisateur n'aurait pas installé votre police préférée :

#mytextarea {
    font-family: 'DejaVu Sans Mono', monospace;
}

Answer 4

textarea
{
font-family: monospace;
}

Vous devrez peut-être ajouter un important si cela ne fonctionne pas.

textarea
{
font-family: monospace !important;
}