Como a largura do texto é medida?

A largura do texto refere-se ao espaço horizontal em pixels que uma sequência de caracteres ocupa quando renderizada com uma fonte, tamanho e peso específicos. Diferentemente da contagem de caracteres, a largura em pixels depende do espaçamento proporcional de cada glifo — a letra "W" é muito mais larga que "i" na maioria das fontes. Medir com precisão a largura do texto é importante para layout de UI, truncamento de rótulos, renderização dinâmica de canvas e ajuste de strings em contêineres de largura fixa.

Os navegadores expõem o método measureText() da API HTML5 Canvas, que calcula a largura do texto renderizado sem exibi-lo na tela. Ao desenhar em um contexto de canvas offscreen, uma medição precisa em sub-pixels pode ser obtida para qualquer combinação de família de fonte, tamanho e peso.

Descrição da ferramenta

Esta ferramenta calcula a largura em pixels de uma ou duas strings de texto usando a API Canvas. Selecione uma família de fonte, defina o tamanho e peso da fonte e veja instantaneamente a largura em pixels renderizada. Quando duas strings são inseridas, uma visualização de comparação mostra a diferença absoluta e a proporção de largura entre elas.

Recursos

  • Suporta todas as fontes do sistema seguras para web e arquivos de fonte personalizados carregados (TTF, OTF, WOFF, WOFF2)
  • Compare duas strings ao mesmo tempo com estatísticas de diferença e proporção
  • Tamanho de fonte ajustável de 1 a 256 px e todos os nove valores padrão de peso de fonte

Como funciona

A largura é medida usando a API CanvasRenderingContext2D.measureText() do navegador. Um elemento <canvas> offscreen é criado, a propriedade de fonte do seu contexto 2D é definida para corresponder à família, tamanho e peso selecionados, e measureText() retorna a largura da caixa delimitadora em pixels. Fontes personalizadas são carregadas no registro FontFace do navegador antes da medição para que os resultados reflitam a fonte real.