Wie berechnet man die Textbreite in JavaScript ohne Monospace-Schriftarten genau?

Berechnung der Textbreite in JavaScript ohne Monospace-Schriftart

Frage:

Wie kann die Textbreite in JavaScript ohne genau berechnet werden? auf Monospace verlassen Schriftarten?

Antwort:

In HTML 5 bietet die Methode Canvas.measureText eine Lösung. Hier ist ein Beispiel:

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

Diese Funktion misst die Textbreite in Pixel basierend auf einer angegebenen Schriftart. Zum Beispiel:

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

Sie können Schriftarteinstellungen auch aus vorhandenen Elementen mithilfe der Dienstprogrammfunktion getCanvasFont ermitteln:

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));

Vorteile und Überlegungen

Dieser Ansatz bietet Vorteile gegenüber DOM-basierte Methoden:

• Prägnanz und Sicherheit
• Anpassungsoptionen (z. B. textAlign, textBaseline)

Beachten Sie jedoch Folgendes:

• Abstand, Rand und Rahmen müssen berücksichtigt werden beim Hinzufügen von Text zum DOM
• Verschiedene Browser bieten möglicherweise Subpixel oder Ganzzahl Genauigkeit
• Firefox zeigt mit der Canvas-Methode eine schnellere Leistung

Das obige ist der detaillierte Inhalt vonWie berechnet man die Textbreite in JavaScript ohne Monospace-Schriftarten genau?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!