Editar estilos e configurações de fonte CSS no painel Estilos

Para facilitar o trabalho com tipografia, um Editor de Fontes visual agora está disponível no painel Estilos . Usando o Editor de Fontes, você pode alterar suas configurações de fonte e as alterações são renderizadas imediatamente no navegador - tudo sem conhecimento aprofundado do CSS. O ícone Editor de Fontes da guia >Estilos da ferramenta >Elementos abre o Editor de Fontes, que consiste em duas partes:

• O seletor família de fontes .
• O editor de Propriedades do CSS .

A tipografia na Web é uma parte importante da experiência do usuário. Você deseja garantir que as fontes sigam as diretrizes da marca corporativa e que seu conteúdo seja exibido conforme o esperado em vários dispositivos. O texto deve ser fácil de ler usando tamanho e altura da linha. Os usuários podem redimensionar fontes para atender às necessidades individuais.

Para situações em que fontes específicas não estão disponíveis em um dispositivo de usuário, você deve fornecer opções de fonte de fallback.

O CSS oferece melhor suporte para tipografia nos últimos anos. Dezenas de unidades CSS diferentes estão disponíveis para definir o tamanho do texto. Várias propriedades CSS estão disponíveis para controlar o tamanho da fonte, o espaçamento, a altura da linha e outros recursos tipográficos.

Atualmente, a ferramenta Habilitar o novo Editor de Fontes no recurso de painel Estilos é experimental e você precisa ativá-la para as Ferramentas de Desenvolvedor do Microsoft Edge.

Qualquer CSS no painel Estilos , definições de fonte ou estilos embutidos, tem um ícone do Editor de Fontes . Para abrir o editor de fontes visual, clique no ícone Editor de Fontes .

O Editor de Fontes é aberto na parte superior do painel Estilos :

Todos os campos no Editor de Fontes visuais são preenchidos a partir dos valores no CSS no painel Estilos . Por exemplo, a line-height definição é definida como 160% no painel Estilos , de modo que o campo de texto de altura da linha exibe 160, e a lista suspensa da unidade exibe %. Além disso, o controle deslizante é definido automaticamente para corresponder aos valores do campo de texto.

O seletor família de fontes

O seletor Família de Fontes é a parte superior do Editor de Fontes visual. Para selecionar as fontes da regra CSS, no editor do CSS, use o seletor Família de Fontes . Você pode selecionar fontes de main e fallback para cada regra CSS.

O Editor de Fontes é aberto na parte superior do painel Estilos com o seletor família de fontes realçado:

Use a lista suspensa Família de Fontes para selecionar uma fonte. As fontes são organizadas em quatro grupos:

• Fontes computadas, que são as fontes disponíveis na planilha de estilos no painel Estilos .
• Fontes do sistema, que são as fontes disponíveis no sistema operacional atual.
• Famílias de fontes genéricas, como serif ou sans-serif.
• Valores globais, como inherit, initiale unset.

O Editor de Fontes é aberto na parte superior do painel Estilos com o seletor família de fontes realçado:

Depois de selecionar uma fonte, outro menu suspenso será exibido para você selecionar fontes de fallback. Você pode selecionar até oito fontes de fallback. Para remover uma fonte, clique no ícone Excluir Família de Fontes .

Observação

Se você selecionar um valor global para a família de fontes, não receberá outro menu suspenso, já que não há nenhum fallback para ele no CSS.

O editor de Propriedades do CSS

Você pode alterar as propriedades da fonte CSS na parte inferior do Editor de Fontes visual. Você pode alterar o tamanho da fonte, a altura da linha, o peso da fonte e o espaçamento de letras usando qualquer um dos controles da interface do usuário. Suas alterações são aplicadas imediatamente no navegador.

O Editor de Fontes é aberto na parte superior do painel Estilos , com as propriedades CSS realçadas:

Você também pode converter unidades CSS usando o Editor de Fontes visual. Por exemplo, você pode usar a ferramenta em uma regra CSS em que o controle deslizante Tamanho da Fonte é inicialmente definido como 16 pixels. Agora, use a lista suspensa da unidade e selecione o valor em. O 1 em exibido é igual a 16 pixels.

Alterando o tamanho da fonte para 16 pixels:

Abrindo a lista suspensa de unidade para converter em em:

A lista suspensa de unidade fornece todas as unidades CSS numéricas disponíveis. O tamanho da fonte, a altura da linha, o peso da fonte e o espaçamento usam unidades diferentes. Quando as caixas de texto tiverem foco, você pode pressionar as arrow up teclas e arrow down para ajustar suas configurações. Para usar os controles deslizantes com um teclado, pressione as arrow left teclas e arrow down .

O editor de Propriedades do CSS também inclui palavras-chave predefinidas. Para usar as palavras-chave predefinidas, no lado direito, clique no Toggle Input Type ícone. A interface do usuário é alterada e uma lista suspensa de palavras-chave predefinidas são exibidas. Para retornar à interface do usuário com o controle deslizante e outros controles de interface do usuário, clique no Toggle Input Type ícone novamente.

Abrindo a interface de palavra-chave predefinida: