Bagaimana untuk Mengira Lebar Teks dengan Tepat dalam JavaScript Tanpa Fon Monospace?

Mengira Lebar Teks dalam JavaScript Tanpa Muka Taip Monospace

Soalan:

Bagaimanakah lebar teks boleh dikira dengan tepat dalam JavaScript tanpa bergantung pada monospace fon?

Jawapan:

Dalam HTML 5, kaedah Canvas.measureText menyediakan penyelesaian. Berikut ialah contoh:

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

Fungsi ini mengukur lebar teks dalam piksel berdasarkan fon yang ditentukan. Contohnya:

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

Anda juga boleh menentukan tetapan fon daripada elemen sedia ada menggunakan fungsi utiliti 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));

Kelebihan dan Pertimbangan

Pendekatan ini menawarkan kelebihan berbanding Kaedah berasaskan DOM:

• Keringkas dan keselamatan
• Pilihan penyesuaian (cth., textAlign, textBaseline)

Walau bagaimanapun, ambil perhatian bahawa:

• Padding, margin dan jidar perlu diambil kira apabila menambah teks pada DOM
• Pelayar yang berbeza mungkin menyediakan sub-piksel atau integer ketepatan
• Firefox mempamerkan prestasi yang lebih pantas dengan kaedah Kanvas

Atas ialah kandungan terperinci Bagaimana untuk Mengira Lebar Teks dengan Tepat dalam JavaScript Tanpa Fon Monospace?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!