Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Usando Fontes

O Godot permite definir fontes específicas para diferentes nós de UI.

Existem três lugares diferentes onde você pode configurar o uso de fontes. O primeiro é no editor de temas. Escolha o nó para o qual deseja definir a fonte e selecione a aba de fontes. O segundo é no inspetor para nós de controle em Theme Overrides > Fonts. Por fim, nas configurações do inspetor para temas em Default Font.

Se nenhuma sobreposição de fonte for especificada em lugar nenhum, a Open Sans SemiBold será usada como a fonte padrão do projeto.

Nota

Desde o Godot 4.0, os tamanhos de fonte não são mais definidos na própria fonte, mas são definidos no nó que usa a fonte. Isso é feito na seção Theme Overrides > Font Sizes do inspetor.

Isso permite alterar o tamanho da fonte sem ter que duplicar o recurso de fonte para cada tamanho de fonte diferente.

Existem 2 tipos de arquivos de fonte: dinâmicas (formatos TTF/OTF/WOFF/WOFF2) e bitmap (formato BMFont .fnt ou imagem monoespaçada). As fontes dinâmicas são a opção mais comumente usada, pois podem ser redimensionadas e ainda manter uma aparência nítida em tamanhos maiores. Graças à sua natureza baseada em vetores, elas também podem conter muito mais glifos, mantendo um tamanho de arquivo razoável se comparadas às fontes em bitmap. As fontes dinâmicas também suportam alguns recursos avançados que as fontes em bitmap não conseguem suportar, como as ligaduras (vários caracteres se transformando em um único design diferente).

Dica

Você pode encontrar arquivos de fontes com licença livre em sites como Google Fonts e Font Library.

As fontes são protegidas por direitos autorais. Verifique cuidadosamente a licença de uma fonte antes de usá-la, pois nem todas as fontes permitem o uso comercial sem a compra de uma licença.

Ver também

Você pode ver como as fontes funcionam em ação usando o projeto de demonstração de BiDI e Font Features.

Fontes dinâmicas

O Godot suporta os seguintes formatos de fonte dinâmica:

  • TrueType Font ou Collection (.ttf, .ttc)

  • OpenType Font ou Collection (.otf, .otc)

  • Web Open Font Format 1 (.woff)

  • Web Open Font Format 2 (.woff2)

Embora o .woff e especialmente o .woff2 tendam a resultar em tamanhos de arquivo menores, não existe um formato de fonte universalmente "melhor". Na maioria das situações, recomenda-se usar o formato de fonte que foi fornecido no site do desenvolvedor da fonte.

Fontes em bitmap

O Godot suporta o formato de fonte em bitmap BMFont (.fnt). Este é um formato criado pelo programa BMFont. Muitos programas compatíveis com BMFont também existem, como o BMGlyph ou o fontcutter baseado na web.

Alternativamente, você pode importar qualquer imagem para ser usada como uma fonte em bitmap. Para fazer isso, selecione a imagem no painel FileSystem, vá para o painel Import, altere o tipo de importação para Font Data (Image Font) e clique em Reimport:

Alterando o tipo de importação para Font Data (Image Font)

Alterando o tipo de importação para Font Data (Image Font)

O layout do conjunto de caracteres da fonte pode estar em qualquer ordem, mas ordens que correspondem ao Unicode padrão são recomendadas, pois exigirão muito menos configuração para importar. Por exemplo, a fonte em bitmap abaixo contém caracteres ASCII e segue a ordenação ASCII padrão:

Exemplo de fonte bitmap

Crédito: LibreQuake (redimensionada e cortada para excluir o intervalo estendido)

As seguintes opções de importação podem ser usadas para importar a imagem da fonte acima com sucesso:

Opções de importação a serem usadas para o exemplo de fonte acima

Opções de importação a serem usadas para o exemplo de fonte acima

A opção Character Ranges é uma matriz que mapeia cada posição na imagem (em coordenadas de blocos/tiles, não pixels). O atlas de fontes é percorrido da esquerda para a direita e de cima para baixo. Os caracteres podem ser especificados com números decimais (127), números hexadecimais (0x007f) ou entre aspas simples ('~'). Os intervalos podem ser especificados com um hífen entre os caracteres.

Por exemplo, 0-127 (ou 0x0000-0x007f) denota o intervalo ASCII completo. Como outro exemplo, ' '-'~' é equivalente a 32-127 e denota o intervalo de caracteres ASCII imprimíveis (visíveis).

Certifique-se de que a opção Character Ranges não exceda o número de Columns × Rows definido. Caso contrário, a fonte falhará ao ser importada.

Se a imagem da sua fonte contiver margens não usadas para os glifos da fonte (como informações de atribuição), tente ajustar a opção Image Margin. Esta é uma margem aplicada apenas uma vez ao redor de toda a imagem.

Se a imagem da sua fonte contiver guias (na forma de linhas entre os glifos) ou se o espaçamento entre os caracteres parecer incorreto, tente ajustar a propriedade Character Margin. Essa margem é aplicada para cada glifo importado.

Se você precisar de um controle mais preciso sobre o espaçamento dos caracteres do que o oferecido pelas opções de Character Margin, existem mais alternativas.

Por um lado, a opção Character Ranges suporta 3 argumentos adicionais após o intervalo de caracteres especificado. Esses argumentos adicionais controlam o posicionamento e o espaçamento deles. Eles representam o avanço de espaço (space advance), o deslocamento do eixo X (X axis offset) e o deslocamento do eixo Y (Y axis offset), nessa ordem. Eles alterarão o avanço de espaço e o deslocamento de cada caractere pela quantidade de pixels inserida. O avanço de espaço é extremamente útil se, por exemplo, suas letras minúsculas forem mais finas que as maiúsculas.

Diagrama mostrando os valores de avanço e deslocamento sendo usados em character ranges.

Tenha em mente que os deslocamentos podem fazer com que o seu texto seja cortado nas bordas dos limites do seu label.

Por outro lado, você também pode configurar pares de kerning (Kerning Pairs) para caracteres individuais. Especifique seu par de kerning digitando dois conjuntos de caracteres separados por um espaço, seguidos por outro espaço e um número para especificar quantos pixels extras/a menos de espaçamento esses dois conjuntos de caracteres devem ter quando colocados lado a lado.

../../_images/using_fonts_bitmap_kerning_pairs_example.webp

Se necessário, os caracteres do seu par de kerning podem ser especificados pelo código de caractere Unicode, inserindo \uXXXX, onde XXXX é o valor hexadecimal do caractere Unicode.

Carregando um arquivo de fonte

Para carregar um arquivo de fonte (dinâmica ou bitmap), use as opções Quick Load ou Load no menu suspenso do recurso ao lado de uma propriedade de fonte e, em seguida, navegue até o arquivo de fonte em questão:

../../_images/using_fonts_load_font.webp

Carregando um arquivo de fonte

Você também pode arrastar e soltar um arquivo de fonte do painel FileSystem para a propriedade do inspetor que aceita um recurso de Fonte.

Aviso

No Godot 4.0 e versões posteriores, as propriedades de filtro de textura e repetição são definidas no local onde a textura é utilizada, e não na própria textura. Isso também se aplica às fontes (tanto dinâmicas quanto em bitmap).

Fontes que possuem uma aparência de pixel art devem ter a filtragem bilinear desativada, alterando a configuração de projeto Rendering > Textures > Canvas Textures > Default Texture Filter para Nearest.

O tamanho da fonte também deve ser um múltiplo inteiro do tamanho original de design (que varia para cada fonte), e o nó Control que usa a fonte deve ser dimensionado por um múltiplo inteiro também. Caso contrário, a fonte pode parecer borrada. Os tamanhos de fonte no Godot são especificados em pixels (px), não em pontos (pt). Tenha isso em mente ao comparar tamanhos de fonte entre diferentes softwares.

O modo de filtro de textura também pode ser configurado em nós individuais que herdam de CanvasItem, definindo a propriedade CanvasItem.texture_filter.

Contornos e sombras de fonte

Contornos (outlines) e sombras de fonte podem ser usados para melhorar a legibilidade quando a cor de fundo não é conhecida com antecedência. Por exemplo, esse é o caso de elementos de HUD que são desenhados sobre uma cena 2D ou 3D.

Os contornos de fonte estão disponíveis na maioria dos nós que derivam de Control, além do Label3D.

Para ativar o contorno de uma fonte em um determinado nó, configure as sobreposições de tema Font Outline Color e Outline Size no inspetor. O resultado deve ser semelhante a isto:

Exemplo de contorno de fonte

Exemplo de contorno de fonte

Nota

Se estiver usando uma fonte com renderização MSDF, a opção de importação MSDF Pixel Range deve ser definida para pelo menos o dobro do valor do tamanho do contorno para que a renderização do contorno pareça correta. Caso contrário, o contorno pode parecer cortado antes do esperado.

O suporte para sombras de fonte é mais limitado: elas estão disponíveis apenas no Label e no RichTextLabel. Além disso, as sombras de fonte sempre têm uma borda dura (mas você pode reduzir a opacidade delas para torná-las mais sutis). Para ativar as sombras de fonte em um determinado nó, configure as sobreposições de tema Font Shadow Color, Shadow Offset X e Shadow Offset Y em um nó Label ou RichTextLabel de acordo:

Configurando sombra de fonte em um nó Label

Configurando sombra de fonte em um nó Label

O resultado deve ficar assim:

Exemplo de sombra de fonte

Exemplo de sombra de fonte

Dica

Você pode criar sobreposições locais para a exibição de fontes em nós Label criando um recurso LabelSettings que você pode reutilizar em outros nós Label. Esse recurso tem prioridade sobre as propriedades de tema.

Recursos avançados de fonte

Antialiasing

Você pode ajustar como a fonte deve ser suavizada ao renderizar modificando o antialiasing e o hinting. Estas são propriedades diferentes, com casos de uso distintos.

O antialiasing controla como as bordas dos glifos devem ser suavizadas ao rasterizar a fonte. O método padrão de antialiasing (Grayscale) funciona bem em todas as tecnologias de tela. No entanto, em tamanhos pequenos, o antialiasing em tons de cinza pode fazer com que as fontes pareçam borradas.

A nitidez do antialiasing pode ser aprimorada usando a otimização de subpixel LCD, que aproveita os padrões de subpixels da maioria dos monitores LCD ao deslocar o antialiasing da fonte por canal (vermelho/verde/azul). A desvantagem é que isso pode introduzir artefatos de cores ("fringing") nas bordas, especialmente em tecnologias de tela que não usam subpixels RGB padrão (como telas OLED).

Na maioria dos jogos, recomenda-se manter o antialiasing padrão Grayscale. Para aplicações que não sejam jogos, a otimização de subpixel LCD vale a pena ser explorada.

Comparação de antialiasing de fonte

De cima para baixo: Desativado, Grayscale, LCD Subpixel (RGB)

Nota

O antialiasing não pode ser alterado em fontes renderizadas em MSDF – elas são sempre renderizadas com antialiasing em tons de cinza.

Hinting (Dica de renderização)

O hinting controla a intensidade com que as bordas dos glifos devem se alinhar (snap) aos pixels ao rasterizar a fonte. None resulta na aparência mais suave, o que pode deixar a fonte borrada em tamanhos pequenos. Light (padrão) é mais nítido ao alinhar as bordas dos glifos aos pixels apenas no eixo Y, enquanto Full é ainda mais nítido ao alinhar as bordas dos glifos aos pixels tanto no eixo X quanto no Y. Dependendo da preferência pessoal, você pode preferir usar um modo de hinting em vez de outro.

Comparação de hint de fonte

De cima para baixo: Sem hinting (None), Light, Full hinting

Nota

Se a alteração do modo de hinting não tiver efeito visível após clicar em Reimport, geralmente é porque a fonte não inclui instruções de hinting. Isso pode ser resolvido procurando por uma versão do arquivo de fonte que inclua instruções de hinting ou ativando a opção Force Autohinter no painel Import. Isso usará o autohinter do FreeType para adicionar automaticamente instruções de hinting à fonte importada.

Posicionamento de subpixel

O posicionamento de subpixel pode ser ajustado. Este é um recurso do FreeType que permite que os glifos sejam renderizados de forma mais próxima à sua forma pretendida. A configuração padrão Auto ativa automaticamente o posicionamento de subpixel em tamanhos de fonte pequenos, mas o desativa em tamanhos grandes para melhorar o desempenho da rasterização.

Você pode forçar o modo de posicionamento de subpixel para Disabled, One half of a pixel (Metade de um pixel) ou One quarter of a pixel (Um quarto de um pixel). One quarter of a pixel oferece a melhor qualidade, ao custo de tempos de rasterização mais longos.

A alteração do antialiasing, do hinting e do posicionamento de subpixel tem o efeito mais visível em tamanhos de fonte menores.

Aviso

Fontes que possuem uma aparência de pixel art devem ter seu modo de posicionamento de subpixel definido como Disabled. Caso contrário, a fonte pode parecer ter tamanhos de pixel irregulares.

Esta etapa não é necessária para fontes em bitmap, pois o posicionamento de subpixel é relevante apenas para fontes dinâmicas (que geralmente são feitas de elementos vetoriais).

Mipmaps

Por padrão, as fontes não têm mipmaps gerados para reduzir o uso de memória e acelerar a rasterização. No entanto, isso pode fazer com que as fontes redimensionadas para menos (downscaled) fiquem granuladas. Isso pode ser especialmente perceptível com o recurso de Texto 3D que não possui o Fixed Size ativado. Isso também pode ocorrer ao exibir texto com uma fonte tradicional rasterizada (não-MSDF) em um nó Control que tenha sua escala inferior a (1, 1).

Depois de selecionar uma fonte no painel FileSystem, você pode ativar a opção Mipmaps no painel Import para melhorar a aparência da renderização da fonte quando reduzida.

Os mipmaps também podem ser ativados em fontes MSDF. Isso pode melhorar um pouco a qualidade da renderização da fonte em tamanhos menores que o padrão, mas as fontes MSDF já são resistentes ao aspecto granulado nativamente.

Renderização de fonte MSDF

A renderização de fonte via Campo de Distância Assinado Multicanal (MSDF) permite renderizar fontes em qualquer tamanho, sem a necessidade de rasterizá-las novamente quando seu tamanho muda.

A renderização de fonte MSDF possui 2 vantagens em relação à rasterização de fonte tradicional, que o Godot usa por padrão:

  • A fonte sempre parecerá nítida, mesmo em tamanhos enormes.

  • Há menos travamentos (stuttering) ao renderizar caracteres em tamanhos de fonte grandes pela primeira vez, pois nenhuma rasterização é executada.

As desvantagens da renderização de fontes MSDF são:

  • Custo de processamento básico mais alto para a renderização da fonte. Isso geralmente não é perceptível em plataformas desktop, mas pode causar impacto em dispositivos móveis de baixo desempenho.

  • Fontes em tamanhos pequenos não parecerão tão nítidas quanto as fontes rasterizadas, devido à falta de hinting.

  • Renderizar novos glifos pela primeira vez em tamanhos de fonte pequenos pode ser mais pesado em comparação com as fontes rasterizadas tradicionais. O recurso de Pré-renderização de fonte pode ser usado para amenizar isso.

  • A otimização de subpixel LCD não pode ser ativada para fontes MSDF.

  • Fontes com contornos que se autointerseptam não serão renderizadas corretamente no modo MSDF. Se você notar problemas de renderização em fontes baixadas de sites como o Google Fonts, tente baixar a fonte no site oficial do autor.

Comparação de métodos de rasterização de fonte

Comparação de métodos de rasterização de fonte. De cima para baixo: rasterizado sem oversampling, rasterizado com oversampling, MSDF

Para ativar a renderização MSDF para uma determinada fonte, selecione-a no painel FileSystem, vá para o painel Import, ative a opção Multichannel Signed Distance Field e clique em Reimport:

Ativando MSDF nas opções de importação da fonte

Ativando MSDF nas opções de importação da fonte

Usando emoji

O Godot possui suporte limitado para fontes de emoji:

  • Fontes de emoji CBDT/CBLC (PNGs incorporados) e SVG são suportadas.

  • Fontes de emoji COLR/CPAL (formato vetorial personalizado) não são suportadas.

  • A compressão de imagem bitmap EMJC (usada pela fonte de emoji do sistema do iOS) não é suportada. Isso significa que para dar suporte a emojis no iOS, você deve usar uma fonte personalizada que utilize compressão bitmap SVG ou PNG no lugar.

Para que o Godot consiga exibir emojis, a fonte utilizada (ou uma de suas fontes de fallback) precisa incluí-los. Caso contrário, os emojis não serão exibidos e os caracteres substitutos "tofu" (quadrados em branco) aparecerão no lugar:

Aparência padrão ao tentar usar emoji em um label

Aparência padrão ao tentar usar emoji em um label

Depois de adicionar uma fonte para exibir emojis, como a Noto Color Emoji, você obtém o resultado esperado:

Aparência correta após adicionar uma fonte de emoji ao label

Aparência correta após adicionar uma fonte de emoji ao label

Para usar uma fonte comum junto com emojis, recomenda-se especificar uma fonte de fallback que aponte para a fonte de emoji nas opções avançadas de importação da fonte principal. Se você deseja usar a fonte padrão do projeto enquanto exibe emojis, deixe a propriedade Base Font em FontVariation vazia e adicione um fallback de fonte apontando para a fonte de emoji:

Dica

As fontes de emoji são bastante grandes, então você pode preferir carregar uma fonte do sistema para fornecer os glifos de emoji em vez de empacotá-la com o seu projeto. Isso permite oferecer suporte completo a emojis no seu projeto sem aumentar o tamanho do arquivo PCK exportado. A desvantagem é que os emojis parecerão diferentes dependendo da plataforma, e o carregamento de fontes do sistema não é suportado em todas as plataformas.

É possível utilizar uma fonte do sistema como uma fonte substituta também.

Usando fontes de ícones

Ferramentas como o Fontello podem ser usadas para gerar arquivos de fonte contendo vetores importados de arquivos SVG. Isso pode ser usado para renderizar elementos vetoriais personalizados como parte do seu texto ou para criar ícones 3D extrudados com Texto 3D e TextMesh.

Nota

O Fontello atualmente não suporta a criação de fontes multicoloridas (que o Godot consegue renderizar). Até novembro de 2022, o suporte para fontes multicoloridas em ferramentas de geração de fontes de ícones continua escasso.

Dependendo do seu caso de uso, isso pode levar a resultados melhores do que usar a tag img no RichTextLabel. Diferente de imagens bitmap (incluindo SVGs, que são rasterizados na importação pelo Godot), dados vetoriais verdadeiros podem ser redimensionados para qualquer tamanho sem perder qualidade.

Depois de baixar o arquivo de fonte gerado, carregue-o no seu projeto Godot e especifique-o como uma fonte personalizada para um nó Label, RichTextLabel ou Label3D. Acesse a interface web do Fontello, selecione o caractere e copie-o pressionando Ctrl + C (Cmd + C no macOS). Cole o caractere na propriedade Text do seu nó Label. O caractere aparecerá como um glifo substituto no inspetor, mas deve ser exibido corretamente na viewport 2D/3D.

Para usar uma fonte de ícones junto com uma fonte tradicional no mesmo Control, você pode especificar a fonte de ícones como um fallback. Isso funciona porque as fontes de ícones usam a área de uso privado do Unicode, que é reservada para o uso de fontes personalizadas e não contém glifos padrão por design.

Nota

Várias fontes de ícones modernas, como o Font Awesome 6, possuem uma variante de desktop que utiliza ligaturas para especificar ícones. Isso permite que você especifique ícones digitando o nome deles diretamente na propriedade Text de qualquer nó que consiga exibir fontes. Assim que o nome do ícone for totalmente inserido como texto (como house), ele será substituído pelo ícone.

Embora seja mais fácil de usar, essa abordagem não pode ser usada com fallbacks de fonte, pois os caracteres da fonte principal terão prioridade sobre as ligaturas da fonte de fallback.

Fallbacks de fonte

O Godot suporta a definição de um ou mais fallbacks de fonte quando a fonte principal carece de um glifo a ser exibido. Existem 2 casos de uso principais para definir fallbacks de fonte:

  • Usar uma fonte que suporta apenas conjuntos de caracteres latinos, mas usar outra fonte para ser capaz de exibir texto em outro conjunto de caracteres, como o cirílico.

  • Usar uma fonte para renderizar texto e outra fonte para renderizar emojis ou ícones.

Abra a janela Advanced Import Settings dando um duplo clique no arquivo de fonte no painel FileSystem. Você também pode selecionar a fonte no painel FileSystem, ir até o painel Import e escolher Advanced… na parte inferior:

../../_images/using_fonts_advanced_import_settings.webp

Dock de importação

Na janela que aparecer, procure pela seção Fallbacks na barra lateral direita, clique no texto Array[Font] (size 0) para expandir a propriedade e clique em Add Element:

../../_images/using_fonts_font_fallbacks_add.webp

Adicionando fallback de fonte

Clique na seta do menu suspenso no novo elemento e escolha um arquivo de fonte usando as opções Quick Load ou Load:

../../_images/using_fonts_font_fallbacks_load.webp

Carregando fallback de fonte

É possível adicionar fontes de fallback mesmo utilizando a fonte padrão do projeto. Para fazer isso, deixe a propriedade Base Font vazia enquanto adiciona um ou mais fallbacks de fonte.

Nota

Os fallbacks de fonte também podem ser definidos localmente de forma semelhante ao Recursos de fonte OpenType, mas isso não será abordado aqui por motivos de brevidade.

Fontes variáveis

O Godot possui suporte completo para fontes variáveis (variable fonts), que permitem usar um único arquivo de fonte para representar vários pesos e estilos de fonte (regular, negrito, itálico, ...). Isso deve ser suportado pelo arquivo de fonte que você está utilizando.

To use a variable font, crie um recurso FontVariation no local onde pretende usar a fonte e carregue um arquivo de fonte dentro do recurso FontVariation:

../../_images/using_fonts_font_variation_create.webp

Criando um recurso FontVariation

../../_images/using_fonts_font_variation_load.webp

Carregando um arquivo de fonte no recurso FontVariation

Role para baixo até a seção Variation do FontVariation e clique no texto Variation Coordinates para expandir a lista de eixos que podem ser ajustados:

../../_images/using_fonts_font_variation_variable_font.webp

Lista de eixos de variação

O conjunto de eixos que você pode ajustar depende da fonte carregada. Algumas fontes variáveis suportam apenas um eixo de ajuste (geralmente weight (peso) ou slant (inclinação)), enquanto outras podem suportar múltiplos eixos de ajuste.

Por exemplo, aqui está a fonte Inter V com um peso (weight) de 900 e uma inclinação (slant) de -10:

../../_images/using_fonts_font_variation_variable_font_example.webp

Exemplo de fonte variável (Inter V)

Dica

Embora os nomes e as escalas dos eixos das fontes variáveis não sejam padronizados, algumas convenções comuns costumam ser seguidas pelos designers de fontes. O eixo weight é padronizado no OpenType para funcionar da seguinte forma:

Valor do eixo

Peso efetivo da fonte

100

Fino (Hairline)

200

Extra Leve (Ultra Light)

300

Leve

400

Regular (Normal)

500

Médio (Medium)

600

Semi-Negrito (Demi-Bold)

700

Negrito

800

Extra Negrito (Ultra Bold)

900

Preto (Heavy)

950

Extra Preto (Ultra Black)

Você pode salvar o FontVariation em um arquivo de recurso .tres para reutilizá-lo em outros lugares:

../../_images/using_fonts_font_variation_save_to_file.webp

Salvando FontVariation em um arquivo de recurso externo

Faux bold e faux italic (Falso negrito e itálico)

Ao escrever textos em negrito ou itálico, usar variantes de fonte projetadas especificamente para isso gera um resultado visual melhor. O espaçamento entre os glifos será mais consistente ao usar uma fonte em negrito, e as formas de certos glifos podem mudar completamente nas variantes em itálico (compare "a" e "a").

No entanto, fontes reais em negrito e itálico exigem o envio de mais arquivos de fonte, o que aumenta o tamanho de distribuição do projeto. Um único arquivo de fonte variável (variable font) também pode ser usado, mas esse arquivo será maior do que uma única fonte não variável. Embora o tamanho do arquivo geralmente não seja um problema para projetos de desktop, pode ser uma preocupação para projetos mobile/web que se esforçam para manter o tamanho de distribuição o menor possível.

Para permitir que fontes em negrito e itálico sejam exibidas sem a necessidade de enviar fontes adicionais (ou usar uma fonte variável maior em tamanho), o Godot suporta o efeito faux (falso) bold e italic.

Faux bold/italic (cima), real bold/italic (baixo). Fonte normal usada: Open Sans SemiBold

Faux bold/italic (cima), real bold/italic (baixo). Fonte normal usada: Open Sans SemiBold

O faux bold e italic é usado automaticamente nas tags de negrito e itálico do RichTextLabel se nenhuma fonte personalizada for fornecida para negrito e/ou itálico.

Para usar o faux bold, crie um recurso FontVariation em uma propriedade onde um recurso de Fonte é esperado. Defina a opção Variation > Embolden para um valor positivo para tornar a fonte mais negritada, ou para um valor negativo para torná-la menos espessa. Os valores recomendados estão entre 0.5 e 1.2, dependendo da fonte.

O faux italic é criado inclinando o texto, o que é feito modificando a transformação por caractere. Isso também é fornecido no FontVariation usando a propriedade Variation > Transform. Definir o componente yx da transformação de caractere para um valor positivo aplicará o itálico ao texto. Os valores recomendados estão entre 0.2 e 0.4, dependendo da fonte.

Ajustando espaçamento de fonte

Para fins estilísticos ou para melhor legibilidade, você pode querer ajustar a forma como uma fonte é apresentada no Godot.

Crie um recurso FontVariation em uma propriedade onde um recurso de Fonte é esperado. Existem 4 propriedades disponíveis na seção Variation > Extra Spacing, que aceitam valores positivos e negativos:

  • Glyph: Espaçamento adicional entre cada glifo.

  • Space: Espaçamento adicional entre as palavras.

  • Top: Espaçamento adicional acima dos glifos. Isso é usado para textos multilinha, mas também para calcular o tamanho mínimo de controles como o Label e o Button.

  • Bottom: Espaçamento adicional abaixo dos glifos. Isso é usado para textos multilinha, mas também para calcular o tamanho mínimo de controles como o Label e o Button.

A propriedade Variation > Transform também pode ser ajustada para esticar os caracteres horizontal ou verticalmente. Isso é feito especificamente ajustando os componentes xx (escala horizontal) e yy (escala vertical). Lembre-se de ajustar o espaçamento dos glifos para compensar quaisquer alterações, pois a transformação de glifo não afeta o espaço que cada glifo ocupa no texto. O dimensionamento não uniforme desse tipo deve ser usado com moderação, pois as fontes geralmente não são projetadas para serem exibidas com estiramento.

Recursos de fonte OpenType

O Godot suporta a ativação de recursos de fonte OpenType, que são uma forma padronizada de definir caracteres alternativos que podem ser alternados sem a necessidade de trocar os arquivos de fonte inteiramente. Apesar de serem chamados de recursos de fonte OpenType, eles também são suportados em arquivos de fonte TrueType (.ttf) e WOFF/WOFF2.

O suporte para recursos OpenType depende muito da fonte utilizada. Algumas fontes não suportam nenhum recurso OpenType, enquanto outras podem suportar dezenas de recursos alternáveis.

Existem 2 maneiras de usar recursos de fonte OpenType:

Globalmente em um arquivo de fonte

Abra a janela Advanced Import Settings dando um duplo clique no arquivo de fonte no painel FileSystem. Você também pode selecionar a fonte no painel FileSystem, ir até o painel Import e escolher Advanced… na parte inferior:

../../_images/using_fonts_advanced_import_settings.webp

Dock de importação

Na janela de diálogo que aparecer, procure pela seção Metadata Overrides > OpenType Features na barra lateral direita, clique no texto Features (0 of N set) para expandir a propriedade e clique em Add Feature:

../../_images/using_fonts_advanced_import_settings_opentype_features.webp

Substituições de recursos OpenType nas Configurações Avançadas de Importação

Em um uso de fonte específico (FontVariation)

Para usar um recurso de fonte, crie um recurso FontVariation da mesma forma que faria para uma fonte variável e, em seguida, carregue um arquivo de fonte dentro do recurso FontVariation:

../../_images/using_fonts_font_variation_create.webp

Criando um recurso FontVariation

../../_images/using_fonts_font_variation_load.webp

Carregando um arquivo de fonte em um recurso FontVariation

Role para baixo até a seção OpenType Features do FontVariation, clique no texto Features (0 of N set) para expandir a propriedade, clique em Add Feature e selecione o recurso desejado no menu suspenso:

../../_images/using_fonts_font_variation_opentype_features.webp

Especificando recursos OpenType em um recurso FontVariation

Por exemplo, aqui está a fonte Inter sem o recurso Slashed Zero (zero cortado) na parte superior, e depois com o recurso OpenType Slashed Zero ativado na parte inferior:

../../_images/using_fonts_font_variation_slashed_zero.webp

Comparação de recurso OpenType (Inter)

Você pode desativar as ligaduras e/ou o kerning para uma fonte específica adicionando recursos OpenType e, em seguida, desmarcando-os no inspetor:

../../_images/using_fonts_font_variation_disable_ligatures.webp

Desativando ligaduras e kerning para uma fonte

Fontes do sistema

Aviso

Carregar fontes do sistema só é suportado no Windows, macOS, Linux, Android e iOS.

No entanto, o carregamento de fontes do sistema no Android não é confiável, pois não há uma API oficial para fazer isso. O Godot precisa depender da análise de arquivos de configuração do sistema, que podem ser modificados por fabricantes terceiros do Android. Isso pode resultar em falhas no carregamento de fontes do sistema.

As fontes do sistema são um tipo diferente de recurso se comparadas às fontes importadas. Elas nunca são realmente importadas para o projeto, mas sim carregadas em tempo de execução. Isso traz 2 benefícios:

  • As fontes não são incluídas no arquivo PCK exportado, resultando em um tamanho de arquivo menor para o projeto exportado.

  • Como as fontes não estão incluídas no projeto exportado, isso evita problemas de licenciamento que ocorreriam se fontes de sistema proprietárias fossem distribuídas junto com o projeto.

O motor usa automaticamente as fontes do sistema como fontes de fallback, o que torna possível exibir caracteres CJK e emojis sem a necessidade de carregar uma fonte personalizada. No entanto, existem algumas restrições aplicáveis, conforme mencionado na seção Usando emojis.

Crie um recurso SystemFont no local onde deseja usar a fonte do sistema:

../../_images/using_fonts_system_font_create.webp

Criando um recurso SystemFont

../../_images/using_fonts_system_font_specify.webp

Especificando um nome de fonte para usar em um recurso SystemFont

Você pode especificar explicitamente um ou mais nomes de fontes (como Arial) ou especificar o nome de um alias de fonte que aponta para uma fonte padrão "standard" do sistema:

Alias de fonte

Windows

macOS/iOS

Linux

Android

sans-serif

Arial

Helvetica

Gerenciado pelo fontconfig

Roboto / Noto Sans

serif

Times New Roman

Times

Gerenciado pelo fontconfig

Noto Serif

monospace

Courier New

Courier

Gerenciado pelo fontconfig

Droid Sans Mono

cursive

Comic Sans MS

Apple Chancery

Gerenciado pelo fontconfig

Dancing Script

fantasy

Gabriola

Papyrus

Gerenciado pelo fontconfig

Droid Sans Mono

No Android, a Roboto é usada para textos em latim/cirílico e a Noto Sans é usada para glifos de outros idiomas, como CJK. Em distribuições Android de terceiros, a seleção exata da fonte pode diferir.

Se você especificar mais de uma fonte, a primeira fonte que for encontrada no sistema será utilizada (de cima para baixo). Os nomes das fontes e aliases não diferenciam maiúsculas de minúsculas (case-insensitive) em todas as plataformas.

Assim como nas variações de fonte, você pode salvar a organização do SystemFont em um arquivo de recurso para reutilizá-lo em outros lugares.

Lembre-se de que diferentes fontes de sistema têm métricas distintas, o que significa que um texto que cabe perfeitamente dentro de um retângulo em uma plataforma pode não caber em outra. Sempre reserve algum espaço adicional durante o desenvolvimento para que os rótulos possam se estender mais, se necessário.

Nota

Ao contrário do Windows e do macOS/iOS, o conjunto de fontes padrão fornecido no Linux depende da distribuição. Isso significa que, em diferentes distribuições Linux, fontes distintas podem ser exibidas para um determinado nome ou alias de fonte do sistema.

Também é possível carregar fontes em tempo de execução mesmo que não estejam instaladas no sistema. Veja Carregamento e salvamento em tempo de execução para mais detalhes.

Pré-renderização de fonte

Ao usar fontes rasterizadas tradicionais, o Godot armazena os glifos em cache por fonte e por tamanho. Isso reduz os travamentos (stuttering), mas eles ainda podem ocorrer na primeira vez que um glifo é exibido ao executar o projeto. Isso pode ser especialmente perceptível em tamanhos de fonte maiores ou em dispositivos móveis.

Ao usar fontes MSDF, elas só precisam ser rasterizadas uma vez em uma textura especial de campo de distância assinado. Isso significa que o cache pode ser feito puramente por fonte, sem levar em consideração o tamanho da fonte. No entanto, a renderização inicial de fontes MSDF é mais lenta em comparação com uma fonte rasterizada tradicional em tamanho médio.

Para evitar problemas de travamento relacionados à renderização de fontes, é possível pré-renderizar (prerender) certos glifos. Isso pode ser feito para todos os glifos que você pretende usar (para resultados ideais) ou apenas para glifos comuns que têm mais probabilidade de aparecer durante o jogo (para reduzir o tamanho do arquivo). Os glifos que não forem pré-renderizados serão rasterizados dinamicamente conforme o habitual.

Nota

Em ambos os casos (tradicional e MSDF), a rasterização da fonte é feita na CPU. Isso significa que o desempenho da GPU não afeta o tempo que leva para as fontes serem rasterizadas.

Abra a janela Advanced Import Settings dando um duplo clique no arquivo de fonte no painel FileSystem. Você também pode selecionar a fonte no painel FileSystem, ir até o painel Import e escolher Advanced… na parte inferior:

../../_images/using_fonts_advanced_import_settings.webp

Dock de importação

Vá para a aba Pre-render Configurations na janela Advanced Import Settings e adicione uma configuração clicando no símbolo de "mais":

Adicionando uma nova configuração de pré-renderização na janela Advanced Import Settings

Adicionando uma nova configuração de pré-renderização na janela Advanced Import Settings

Depois de adicionar uma configuração, certifique-se de que ela esteja selecionada clicando em seu nome uma vez. Você também pode renomear a configuração dando um duplo clique nela.

Existem 2 maneiras de adicionar glifos para serem pré-renderizados em uma determinada configuração. É possível usar as duas abordagens de forma cumulativa:

Usando texto de traduções

Para a maioria dos projetos, essa abordagem é a mais conveniente, pois extrai automaticamente o texto das suas traduções de idioma. A desvantagem é que ela só pode ser usada se o seu projeto oferecer suporte a internacionalização. Caso contrário, utilize a abordagem "Usando texto personalizado" descrita abaixo.

Depois de adicionar as traduções nas Configurações do Projeto, use a aba Glyphs from the Translations para verificar as traduções clicando duas vezes nelas e, em seguida, clique em Shape All Strings in the Translations and Add Glyphs na parte inferior:

Ativando a pré-renderização na janela Advanced Import Settings com a aba Glyphs from the Translations

Ativando a pré-renderização na janela Advanced Import Settings com a aba Glyphs from the Translations

Nota

A lista de glifos pré-renderizados não é atualizada automaticamente quando as traduções são alteradas, portanto, você precisará repetir esse processo se suas traduções mudarem significativamente.

Usando texto personalizado

Embora exija a especificação manual do texto que aparecerá no jogo, essa é a abordagem mais eficiente para jogos que não apresentam entrada de texto por parte do usuário. Essa abordagem vale a pena ser explorada em jogos mobile para reduzir o tamanho do arquivo do aplicativo distribuído.

Para usar o texto existente como base para a pré-renderização, vá para a subaba Glyphs from the Text da janela Advanced Import Settings, insira o texto na janela à direita e clique em Shape Text and Add Glyphs na parte inferior da janela:

Ativando a pré-renderização na janela Advanced Import Settings, aba Glyphs from the Text

Ativando a pré-renderização na janela Advanced Import Settings com a aba Glyphs from the Text

Dica

Se o seu projeto suportar internacionalização, você pode colar o conteúdo dos seus arquivos CSV ou PO na caixa acima para pré-renderizar rapidamente todos os caracteres possíveis que possam ser exibidos durante o jogo (excluindo strings inseridas pelo usuário ou não traduzíveis).

Ativando conjuntos de caracteres (character sets)

O segundo método requer menos configuração e menos atualizações caso o texto do seu jogo mude, sendo mais adequado para jogos com muito texto ou jogos multiplayer com chat. Por outro lado, ele pode fazer com que glifos que nunca aparecem no jogo sejam pré-renderizados, o que é menos eficiente em termos de tamanho de arquivo.

Para usar texto existente como base para pré-renderização, vá para a sub-aba Glyphs from the Character Map (Glifos do Mapa de Caracteres) na caixa de diálogo de Configurações Avançadas de Importação, então dê um clique duplo nos conjuntos de caracteres a serem habilitados à direita:

Ativando a pré-renderização na janela Advanced Import Settings, aba Glyphs from the Character Map

Ativando a pré-renderização na janela Advanced Import Settings com a aba Glyphs from the Character Map

Para garantir uma pré-renderização completa, os conjuntos de caracteres que você precisa ativar dependem de quais idiomas são suportados no seu jogo. Para o inglês, apenas o Basic Latin precisa estar ativado. Ativar também o Latin-1 Supplement permite cobrir totalmente muitos outros idiomas, como francês, alemão e espanhol. Para o russo, o Cyrillic precisa ser ativado, e assim por diante.

Propriedades da fonte padrão do projeto

Na seção GUI > Theme das Configurações Avançadas do Projeto, você pode escolher como a fonte padrão deve ser renderizada:

  • Default Font Antialiasing: Controla o método de antialiasing usado para a fonte padrão do projeto.

  • Default Font Hinting: Controla o método de hinting usado para a fonte padrão do projeto.

  • Default Font Subpixel Positioning: Controla o método de posicionamento de subpixel para a fonte padrão do projeto.

  • Default Font Multichannel Signed Distance Field: Se definido como true, faz com que a fonte padrão do projeto use a renderização de fonte MSDF em vez da rasterização tradicional.

  • Default Font Generate Mipmaps: Se definido como true, ativa a geração e o uso de mipmaps para a fonte padrão do projeto.

Nota

Essas configurações de projeto afetam apenas la fonte padrão do projeto (aquela que está codificada rigidamente no binário do motor).

Custom fonts' properties are controlled by their respective import options instead. You can use the Import Defaults section of the Project Settings dialog to override default import options for custom fonts.