CSS Fonte Kerning

Uma folha de estilo em cascata, CSS é o código de estilo que consiste em tags usadas para adicionar estilo ao conteúdo HTML criado usando as tags HTML. Sabe-se que HTML e CSS têm uma importância na criação e criação do front-end dos sites. Uma folha CSS contém várias propriedades aplicadas a cada conteúdo HTML de maneiras específicas. O conteúdo básico de HTML é o "texto". Como sabemos, sempre que vemos qualquer site ou página da web, os textos estão sempre presentes nele na forma de um parágrafo, título ou qualquer link.

Também vimos as letras expandidas de uma única palavra para se alinhar com qualquer outra frase igualmente. Tudo isso é por causa de uma propriedade CSS relacionada ao texto. Este artigo explicará o texto do conteúdo HTML e uma das propriedades que precisamos aplicar no texto que é a fonte de Kerning.

Introdução ao HTML e CSS

Uma tag html contém duas seções: uma cabeça e um corpo . Todos os conteúdos HTML são escritos dentro da seção corporal das tags HTML. HTML contém principalmente conteúdo que possui tags de abertura e fechamento.

CSS falante é derivado de seus três tipos: CSS em linha, interna e externa. O CSS interno é declarado na seção principal do corpo HTML. Sua explicação adicional é aplicada no momento da implementação. Da mesma forma, a propriedade Kerning de fonte é aplicada na etiqueta de estilo da cabeça. Enquanto o texto é declarado dentro da seção do corpo na forma de um parágrafo ou título.

Propriedade CSS Kerning da Fonte

Um kerning de fonte é a propriedade que está relacionada ao texto. Uma propriedade de fonte é o estilo de texto que inclui cores, estilo de fonte, alinhamento, etc. Da mesma forma, Kerning é uma das propriedades do texto CSS. É aplicado às letras da palavra de qualquer frase. Explica quanto as letras de uma palavra são espaçadas. O valor do kerning pode ser um sinal positivo ou um sinal negativo.

• Valor positivo: Um valor positivo do espaçamento das cartas faz com que os personagens da letra se espalhem ou se expandam mais distantes. O espaço entre duas letras é aumentado pelo valor que aplicamos.
• Valor negativo: Um sinal negativo com um valor do espaçamento da letra traz o personagem próximo um do outro, minimizando ou excluindo a distância entre o caráter para o caráter igualmente.

Um valor de espaçamento de carta pode ser fornecido em diferentes unidades. Por exemplo, os valores são dados em pixels, em e em uma situação normal. Cada unidade tem um efeito diferente. O valor normal tem a menor diferença de espaço em comparação com a fonte sem nenhum efeito de kerning. O efeito do valor decimal é mais do que o valor do dígito. A sintaxe desta propriedade é a seguinte:

Fonte-Kerning: Value;

Além do kerning de fonte, também podemos usar a propriedade de espaçamento de cartas. Agora, implementamos alguns exemplos para explicar o conceito de Kerning de fonte.

Exemplo 1: diferença com e sem kerning

Neste exemplo, usamos a propriedade de espaçamento da carta com um valor normal para verificar a diferença entre os caracteres que não aplicaram o efeito de kerning e aqueles que aplicaram esse efeito.

Considere a seção corporal do código HTML. Use uma tag de cabeçalho para declarar um título simples

. Em seguida, use as tags de parágrafo. Ambos os parágrafos são aplicados com o nome da classe CSS. Esses nomes de classes são declarados dentro da etiqueta de estilo da cabeça que será discutida mais adiante.

texto com fontes kerning.

Da mesma forma, a segunda etiqueta de parágrafo também é declarada.

Na tag de estilo, usamos os dois casos que são declarados nas tags de parágrafo. A classe Kerning contém todas as propriedades relacionadas a fontes, incluindo a propriedade normal da fonte de fontes. Esta propriedade de mamã. Em seguida, a família de fontes é aplicada como serif e a propriedade de tamanho também é aplicada ao texto.

.Kerning
Fontagem de fontes: Normal;
Fonte-família: serif;
Size da fonte: 20px;

Considerando que, na aula preocupante, a propriedade de fontes é tomada como nenhuma. Isso significa que o texto neste parágrafo é declarado sem uma mudança no espaçamento da letra das palavras.

.não -kerning
Fontring de fontes: Nenhum;

O restante das propriedades permanece o mesmo.

Salve o código no arquivo de texto com uma extensão HTML. Ao fazer isso, veremos que o ícone do arquivo é alterado no ícone do navegador em vez do símbolo do editor. Executar esse arquivo no Chrome para ver a saída.

Você verá que não há efeito no primeiro parágrafo em que usamos a propriedade de espaçamento de letra ou o efeito da mamãe como um valor normal. Quando comparamos o primeiro parágrafo com o segundo parágrafo que não tem efeito de kerning, não encontramos mudanças entre eles.

Exemplo 2:

Este exemplo contém os diferentes valores da propriedade de espaçamento de letra. Na etiqueta corporal, usamos cinco parágrafos e cada parágrafo é declarado com uma classe diferente. O nome da classe divulga o funcionamento dos valores que são aplicados no momento da declaração. Em cada classe, um valor diferente é usado.

Por exemplo, usamos o “.EM-WIDER ”Classe com um valor 1EM. Isso torna o texto mais largo que os outros. Enquanto o -0.09em faz com que o texto se torne mais apertado.

.Em-Tight
Espacamento de cartas: -0.09em;

Agora, salve o código e veremos o resultado. Todas as linhas são exibidas com o espaçamento diferente de letra entre elas. O primeiro parágrafo é o normal. O quarto parágrafo com um valor decimal negativo aproximou as letras.

Exemplo 3:

Este exemplo envolve a propriedade da primeira linha. Como o nome indica, a propriedade é implementada na primeira linha. Um estilo embutido é aplicado àqueles que têm a propriedade de largura.

A tag de estilo contém a tag de primeira linha do parágrafo, que mostra que apenas a primeira linha de ambos os parágrafos é afetada.