Conversor de fontes
Font Converter
Converte TTF e OTF em WOFF e de volta no navegador e gera a regra @font-face correspondente; WOFF2 precisa de Brotli e é recusado com uma indicação de ferramentas de desktop.
Converte entre os formatos sfnt e WOFF 1.0 nas duas direções, deduzindo o sentido a partir do arquivo que você solta. As duas direções são sem perdas: WOFF é um contêiner, então empacotar e desempacotar devolve as mesmas tabelas, com o `head.checkSumAdjustment` recalculado para que o resultado valide. WOFF2 é recusado, e a página explica por quê em vez de falhar em silêncio.
TTF · OTF → WOFF, ou WOFF → TTF · OTF
Solte um arquivo e a direção é descoberta sozinha. Tudo acontece nesta aba.
O que funciona e o que não funciona
- · TTF e OTF ⇄ WOFF 1.0: zlib por tabela, com um cabeçalho e um diretório de 44 bytes, como manda a especificação WOFF (W3C, 2012). A compressão é o
CompressionStream('deflate')do próprio navegador, e ao desempacotar o sfnt é remontado com as somas de verificação originais para quehead.checkSumAdjustmentsaia certo. As duas direções são sem perda. - · WOFF2 não dá para construir nem para desempacotar. Precisa de Brotli, e a plataforma web não expõe Brotli a uma página. Se você precisa de WOFF2, use uma ferramenta de desktop: costuma ficar mais 20–30% menor que o WOFF.
- · TTF ⇄ OTF (CFF), trocar o formato dos contornos, é redesenhar e não converter, então não é oferecido. Um .otf que por dentro é TrueType e só engana na extensão é tratado normalmente.
- · A licença de uma fonte (OS/2 fsType) não muda com a conversão. Confira as condições de distribuição antes de colocar num servidor.
Para o tamanho, fazer um subconjunto ganha de longe da conversão de formato: o subconjunto de fonte corta mais de 90% de uma fonte de hangul quando ela é reduzida ao conjunto de 2.350 sílabas.
Como usar
Solte um arquivo
Um TTF ou OTF é empacotado em WOFF; um WOFF é desempacotado de volta para TTF ou OTF, dependendo dos contornos que contém. Não há botão de direção porque a assinatura nos quatro primeiros bytes já diz para que lado ir.
Confira os tamanhos antes e depois
Ir para WOFF tipicamente tira 40–50%, que é zlib por tabela e nada de engenhoso. Se mal se mexe, a fonte provavelmente já é dado comprimido — uma fonte CFF com muitos charstrings compactados, por exemplo.
Pegue o arquivo e o @font-face
A declaração pressupõe que o arquivo fica ao lado da folha de estilo, e os valores de peso e itálico são lidos das tabelas OS/2 e post da fonte em vez de adivinhados pelo nome do arquivo.
Perguntas frequentes
Por que ele não faz WOFF2?
WOFF2 é comprimido com Brotli e também reordena e transforma as tabelas de glifos. A plataforma web dá a uma página um `CompressionStream` com deflate e gzip apenas — não há Brotli, então nenhuma das duas direções é possível em um navegador. Em um computador, o fonttools (`pyftsubset --flavor=woff2`) ou o `woff2_compress` fazem isso, por mais uns 20–30% além do WOFF.
Ele consegue transformar um TTF em um OTF de verdade?
Não, e nada honesto consegue. TrueType usa curvas quadráticas e CFF usa cúbicas; ir de uma para a outra é um reajuste de curva com uma tolerância, o que muda os contornos — isso é redesenhar a fonte, não convertê-la. O que isto trata é o caso comum de um `.otf` com contornos TrueType por dentro, em que só a extensão engana.
Ainda preciso de WOFF, ou TTF serve?
Um TTF servido com gzip ou brotli pelo servidor acaba perto do WOFF, então o formato importa menos do que importava. WOFF ainda vale a pena ter: ele comprime mesmo quando o servidor não comprime, e todo navegador que importa o suporta há uma década. O ganho de longe maior é o subconjunto, não o contêiner.
Converter muda o que a licença permite?
Não. O fsType do OS/2 e cada registro de nome passam sem alteração, o que significa que uma fonte que você não pode incorporar continua sendo uma fonte que você não pode incorporar depois de virar WOFF. Verifique os termos de distribuição antes de colocá-la em um servidor; o inspetor de fontes mostra esses registros.
Pode receber de
Inspetor de fontes
Font Inspector
Abre um arquivo de fonte para mostrar a cobertura de glifos por bloco, a contagem de sílabas coreanas, o peso, os eixos variáveis, a permissão de incorporação e os registros de nome da licença.
Subconjunto de fonte
Font Subsetter
Reduz uma fonte TrueType aos glifos que seu texto realmente usa e pode empacotar o resultado como WOFF — a diferença entre uma webfont coreana de 4 MB e uma de 90 KB.
Editor e explicador de SVG
SVG Editor and Explainer
Edita um SVG ao lado da renderização ao vivo e explica o arquivo: viewBox e escala, transformações, cada comando de caminho, pintura herdada, bytes desperdiçados e o que quebra num <img>, num data URI ou inline.
Mockup de dispositivo
Device Mockup
Coloca um print dentro de uma moldura de celular, tablet, notebook ou navegador, com fundo e sombra.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Inspetor de fontes
Font Inspector
Abre um arquivo de fonte para mostrar a cobertura de glifos por bloco, a contagem de sílabas coreanas, o peso, os eixos variáveis, a permissão de incorporação e os registros de nome da licença.
Subconjunto de fonte
Font Subsetter
Reduz uma fonte TrueType aos glifos que seu texto realmente usa e pode empacotar o resultado como WOFF — a diferença entre uma webfont coreana de 4 MB e uma de 90 KB.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.