Forcer une police non-monospace en largeur fixe en utilisant CSS

Question

Existe-t-il un moyen de forcer une police d'écriture à être à espacement fixe en utilisant CSS ?

Par là, je veux dire, en utilisant une police non monospace, pouvez-vous forcer le navigateur à rendre chaque caractère à une largeur fixe ?

Answer 1

J'ai parfois fait une très jolie chose pour les comptes à rebours :

HTML:

    2
    4
    /
    5
    7

SCSS:

$digit-width: 18px;
.counter {

    text-align: center;
    font-size: $digit-width;

    position: relative;

    width : $digit-width * 4.5;
    margin: 0 auto;
    height: 48px;
}
.counter-digit {

    position: absolute;
    top: 0;
    width: $digit-width;
    height: 48px;
    line-height: 48px;
    padding: 0 1px;

    &:nth-child(1) { left: 0; text-align: right; }
    &:nth-child(2) { left: $digit-width * 1; text-align: left;}
    &:nth-child(3) { left: $digit-width * 2; text-align: center; width: $digit-width / 2} // the divider (/)
    &:nth-child(4) { left: $digit-width * 2.5; text-align: right;}
    &:nth-child(5) { left: $digit-width * 3.5; text-align: left;}
}

Answer 2

Vous pouvez envelopper les chiffres des secondes dans un span et les styliser comme suit... .time-seconds {display: inline-block;width: .52em;text-align: center;} Voir l'extrait de code.

function padlength(what) {
  var output = (what.toString().length == 1) ? "0" + what : what;
  return output;
}

function displaytime() {
  var serverdate = new Date();
  var dd = "am";
  var hh = serverdate.getHours();
  var h = hh;
  if (h >= 12) {
    h = hh - 12;
    dd = "pm";
  }
  if (h == 0) {
    h = 12;
  }
  h = parseInt(h);
  var sec = String(padlength(serverdate.getSeconds()));
  var timeFixed = h + ':' + padlength(serverdate.getMinutes()) + ':' + sec.charAt(0) + '' + sec.charAt(1) + ' ' + dd;
  timeVariable = h + ':' + padlength(serverdate.getMinutes()) + ':' + sec + ' ' + dd;
  document.getElementById("servertime-fixed").innerHTML = timeFixed;
  document.getElementById("servertime-variable").innerHTML = timeVariable;
}

window.onload = function() {
  displaytime();
  setInterval("displaytime()", 1000);
};

center {
  font-size: 3em;
  font-family: Cursive;
}

.time-seconds {
  display: inline-block;
  width: .52em;
  text-align: center;
}

  H:MM:SS mm
  H:MM:SS mm

Answer 3

Je viens de rencontrer le même problème. Ma police ne supportait pas font-variant-numeric: tabular-nums (ce que je savais déjà) et les autres solutions ne me convenaient pas, donc j'ai trouvé cette solution - dans mon cas, j'ai dû étendre l'espacement des lettres et ensuite écraser les zéros (gigantesques) pour le rendre acceptable :

CSS :

.squashzeros { letter-spacing:.2em; }
.squashzeros span { display:inline-block; margin:0 -.09em; }

JS :

document.querySelectorAll('.squashzeros').forEach((o)=>{
        o.innerHTML = o.innerText.replaceAll(/0/g,'0');
    });

Malheureusement, je n'ai trouvé aucune solution en CSS seulement.

Answer 4

Un mélange de réponses de Márton Tamás et nïkö:

document.querySelectorAll('pre').forEach( o => {
  o.innerHTML = o.innerText.replace(/(.)/g, '$1');
});

pre i {
  font-style: normal;
  font-family: serif;
  display: inline-block;
  width: 0.65em;
  text-align: center;
}

. i I 1  | Cela va être incroyable. 12:10
ASDFGHJK | Cela va être incroyable. 08:51

. i I 1  | Cela va être incroyable. 12:10

ASDFGHJK | Cela va être incroyable. 08:51

Answer 5

Non, sauf s'il s'agit d'une vraie police à espacement fixe.