Comment calculer avec précision la largeur du texte en JavaScript sans polices monospaces ?

Calcul de la largeur du texte en JavaScript sans police monospace

Question :

Comment la largeur du texte peut-elle être calculée avec précision en JavaScript sans s'appuyer sur le monospace polices ?

Réponse :

En HTML 5, la méthode Canvas.measureText fournit une solution. Voici un exemple :

function getTextWidth(text, font) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  context.font = font;
  const metrics = context.measureText(text);
  return metrics.width;
}

Cette fonction mesure la largeur du texte en pixels en fonction d'une police spécifiée. Par exemple :

console.log(getTextWidth('hello there!', 'bold 12pt arial')); // Outputs approximately 86

Vous pouvez également déterminer les paramètres de police à partir d'éléments existants à l'aide de la fonction utilitaire getCanvasFont :

function getCanvasFont(el) {
  const fontWeight = getCssStyle(el, 'font-weight') || 'normal';
  const fontSize = getCssStyle(el, 'font-size') || '16px';
  const fontFamily = getCssStyle(el, 'font-family') || 'Times New Roman';
  return `${fontWeight} ${fontSize} ${fontFamily}`;
}

const fontSize = getTextWidth(text, getCanvasFont(myEl));

Avantages et considérations

Cette approche offre des avantages par rapport Méthodes basées sur DOM :

• Concision et sécurité
• Personnalisation options (par exemple, textAlign, textBaseline)

Cependant, notez que :

• Le remplissage, la marge et la bordure doivent être pris en compte lors de l'ajout de texte au DOM
• Différents navigateurs peuvent fournir une précision inférieure au pixel ou entière
• Firefox présente des performances plus rapides avec la méthode Canvas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!