Gerador de pilha de fontes seguras para Web
Crie strings de substituição da família de fontes CSS para qualquer fonte com nosso gerador gratuito de pilha de fontes seguras para a web. Escolha sua fonte principal, selecione uma família genérica e escolha alternativas seguras para sistema operacional, abrangendo Windows, macOS, Linux, iOS e Android. Obtenha um valor, declaração e regra CSS prontos para colar - todo o processamento é executado localmente em seu navegador, sem necessidade de inscrição.
Enter your primary font name, choose a generic family, and select OS-safe fallback fonts. The web safe font stack generator builds a complete font-family CSS value ready to copy into your stylesheet. All processing runs locally in your browser.
Enter the exact font name as it appears in your @font-face or Google Fonts import
Select the OS-safe fonts to include as fallbacks. They will appear in the stack in the order shown below, before the generic family keyword.
Copy the font-family value and paste it into your CSS. Make sure your primary font is loaded via @font-face or a Google Fonts <link> tag - the fallbacks only activate when the primary font fails to load.
Por que usar nosso gerador de pilha de fontes seguras para a Web?
- Geração instantânea de pilha de fontes: crie uma pilha substituta completa da família de fontes CSS para qualquer fonte em segundos. Nosso gerador de pilha de fontes seguras para a Web produz um valor CSS pronto para colar com sua fonte primária, substitutos seguros para o sistema operacional e a família genérica correta - sem espera, sem viagens de ida e volta ao servidor.
- Secure Font Stack Generator Online: Toda a geração de pilha de fontes é executada localmente em seu navegador. Seus nomes de fontes e saída CSS nunca saem do seu dispositivo, garantindo 100% de privacidade sempre que você usa nosso gerador online de pilha de fontes seguro para a web.
- Gerador de pilha de fontes on-line - sem instalação: Use nosso gerador de pilha de fontes seguro para a web diretamente em qualquer navegador, sem necessidade de downloads, plug-ins ou software. Gere pilhas de fontes CSS para qualquer fonte em qualquer dispositivo, em qualquer lugar, de forma totalmente gratuita.
- Múltiplas opções de família genérica: Escolha entre seis famílias genéricas - sans-serif, serif, monospace, system-ui, cursive e fantasy. Cada família vem com um conjunto selecionado de fontes substitutas seguras para sistema operacional, cobrindo Windows, macOS, Linux, iOS e Android.
Casos de uso comuns para Web Safe Font Stack Generator
- Tipografia de aplicativos da Web: use nosso gerador de pilha de fontes seguras para a Web para criar pilhas de fontes robustas para aplicativos da Web que devem ser renderizadas de forma consistente no Windows, macOS, Linux, iOS e Android, mesmo quando a fonte da Web principal não carrega.
- Integração com fontes do Google: combine qualquer fonte do Google com os substitutos corretos e seguros para o sistema operacional usando nosso gerador de pilha de fontes. Quando o Google Fonts está bloqueado ou lento, sua pilha substituta garante que os usuários ainda vejam um tipo de letra visualmente semelhante em vez do padrão do navegador.
- Design de modelo de email: os clientes de email geralmente bloqueiam fontes da web. Use nosso gerador de pilha de fontes seguro para a web para criar pilhas de fontes que se degradam perfeitamente para fontes do sistema como Arial, Georgia ou Courier New no Gmail, Outlook e Apple Mail.
- Pilhas de fontes da interface do sistema: crie a moderna pilha de fontes da interface do sistema usada pelo GitHub, Bootstrap e Tailwind CSS. Nosso gerador inclui -apple-system, BlinkMacSystemFont, Segoe UI, Roboto e todos os substitutos certos para uma sensação de sistema operacional nativo.
- Personalização da estrutura CSS: substitua a pilha de fontes padrão no Tailwind CSS, Bootstrap ou Material UI gerando um valor de família de fontes personalizado com a fonte de sua marca na parte superior e os substitutos corretos para o sistema operacional abaixo dela.
- Tipografia que prioriza o desempenho: reduza a mudança de layout (CLS) escolhendo fontes substitutas que correspondam melhor às suas métricas de fonte primária. Nosso gerador de pilha de fontes seguro para a web ajuda você a escolher substitutos com altura x e largura de caracteres semelhantes para trocas de fontes mais suaves.
O que é uma pilha de fontes seguras para a Web?
Uma pilha de fontes seguras para a web é um valor de família de fontes CSS que lista várias fontes em ordem de prioridade - sua fonte principal primeiro, seguida por fontes substitutas seguras para a web e terminando com uma palavra-chave genérica da família, como sans-serif ou serif . Quando um navegador não consegue carregar a fonte principal, ele desce na pilha até encontrar uma fonte instalada no sistema operacional do usuário. Fontes seguras para a Web são fontes pré-instaladas em praticamente todos os principais sistemas operacionais - Windows, macOS, Linux, iOS e Android - tornando-as alternativas confiáveis. Nosso gerador de pilha de fontes seguro para a web cria o valor CSS completo para você com os substitutos certos para a família genérica escolhida.
Como funciona nosso gerador de pilha de fontes seguras para a Web
- Insira sua fonte principal: digite o nome exato de sua fonte principal - uma fonte do Google, uma fonte da web personalizada ou qualquer fonte carregada via @font-face . Use as predefinições de fontes populares para acesso rápido a opções comuns como Inter, Roboto ou Playfair Display.
- Processamento instantâneo baseado em navegador: selecione uma família genérica e verifique as fontes substitutas seguras para o sistema operacional que deseja incluir. Clique em "Gerar pilha de fontes" e o gerador cria instantaneamente o valor CSS completo da família de fontes - todo o processamento é executado localmente em seu navegador, sem chamadas de servidor.
- Copie ou baixe a saída: copie o valor CSS, a declaração ou a regra completa com um clique ou baixe-o como um arquivo .css. A visualização ao vivo mostra como a pilha é renderizada em seu navegador atual.
O que está incluído na pilha de fontes
- Fonte primária: sua fonte personalizada ou da web – a primeira escolha que o navegador tenta. Ele deve ser carregado via @font-face ou uma tag <link> do Google Fonts para que o navegador o encontre.
- Fontes substitutas seguras para sistema operacional: fontes de sistema pré-instaladas que correspondem ao estilo de sua fonte principal - abrangendo Windows (Arial, Segoe UI, Consolas), macOS (Helvetica Neue, -apple-system, Menlo), Linux (Ubuntu, DejaVu Sans Mono) e plataformas móveis.
- Palavra-chave genérica da família: A rede de segurança final - uma palavra-chave CSS como sans-serif ou monospace que instrui o navegador a usar sua própria fonte padrão desse estilo se nada mais estiver disponível na pilha.
- Nomes de fontes entre aspas: os nomes das fontes que contêm espaços são automaticamente colocados entre aspas duplas (por exemplo, "Times New Roman") conforme exigido pela especificação CSS.
Práticas recomendadas importantes para pilha de fontes
Sempre termine sua pilha de fontes com uma palavra-chave genérica de família - é a única alternativa garantida que todo navegador suporta. Os nomes das fontes com espaços devem ser colocados entre aspas; nomes de uma única palavra e palavras-chave CSS como sans-serif não devem ser citados. A pilha system-ui (usada pelo GitHub, Bootstrap 5 e Tailwind CSS) é a melhor escolha para componentes de UI porque é renderizada na fonte nativa do sistema operacional, melhorando o desempenho percebido e reduzindo a mudança de layout. Para o corpo do texto, escolha substitutos com altura x e largura de caracteres semelhantes à sua fonte principal para minimizar a mudança cumulativa de layout (CLS) durante o carregamento da fonte.
Perguntas frequentes
Um gerador de pilha de fontes seguras para a web cria um valor de família de fontes CSS que lista sua fonte primária seguida por fontes substitutas seguras para o sistema operacional e uma palavra-chave de família genérica. Nosso gerador de pilha de fontes seguro para web é executado inteiramente em seu navegador - nenhum dado é enviado para nenhum servidor - e gera o valor CSS exato pronto para ser colado em sua folha de estilo.
Fontes seguras para a Web são fontes pré-instaladas em praticamente todos os principais sistemas operacionais - Windows, macOS, Linux, iOS e Android. Os exemplos incluem Arial, Helvetica, Georgia, Times New Roman, Courier New e Verdana. Como estão sempre disponíveis, são substitutos confiáveis quando uma fonte da web personalizada falha ao carregar.
Absolutamente. Toda a geração da pilha de fontes acontece localmente no seu navegador usando JavaScript. Seus nomes de fontes e saída CSS nunca são enviados para nenhum servidor, armazenados ou registrados. Seus dados permanecem totalmente privados no seu dispositivo.
Sim. Nosso gerador de pilha de fontes seguro para a web é 100% gratuito, sem inscrição, sem conta e sem limites de uso. Gere pilhas de fontes para qualquer fonte quantas vezes você precisar - totalmente grátis, para sempre.
A especificação CSS exige que nomes de fontes que contenham espaços sejam colocados entre aspas duplas ou simples - por exemplo, "Times New Roman" ou 'Helvetica Neue'. Nomes de fontes com uma única palavra e palavras-chave genéricas de família, como sans-serif, não devem ser citadas. Nosso gerador de pilha de fontes seguro para web lida com citações automaticamente.
A pilha de fontes system-ui usa a fonte nativa da interface do sistema operacional - San Francisco no macOS/iOS, Segoe UI no Windows e Roboto no Android. Ele é usado pelo GitHub, Bootstrap 5 e Tailwind CSS para componentes de UI porque é renderizado na fonte nativa do usuário, melhorando o desempenho percebido e reduzindo a mudança de layout. Use-o para elementos de UI como botões, rótulos e navegação.
CLS ocorre quando o navegador troca de uma fonte substituta para a fonte da web carregada, fazendo com que o texto reflua. Para minimizar o CLS, escolha fontes substitutas com altura x e largura de caracteres semelhantes à sua fonte principal. Por exemplo, Arial é um bom substituto para o Inter porque eles compartilham proporções semelhantes. Você também pode usar os descritores CSS size-adjust e ascent-override em @font-face para ajustar as métricas de fallback.
Sim. Arial é o padrão sem serifa no Windows e Android, enquanto Helvetica é o padrão no macOS e iOS. Incluir ambos garante a correspondência visual mais próxima em todas as plataformas. Nosso gerador de pilha de fontes seguras para a web inclui ambos por padrão no conjunto de fallback sem serifa.
Sim. Clientes de e-mail como Outlook, Gmail e Apple Mail geralmente bloqueiam fontes da web, portanto, uma pilha substituta robusta é essencial para tipografia de e-mail. Use nosso gerador de pilha de fontes seguras para a web para construir uma pilha que se degrade perfeitamente nas fontes do sistema. Para e-mail, priorize fontes como Arial, Georgia, Verdana e Courier New, pois elas têm o mais amplo suporte ao cliente de e-mail.