Uma fonte é um conjunto de caracteres de texto com algum estilo e tamanho que agregam valor ao aplicativo. O CSS nos permite fazer fontes personalizadas de acordo com nossas necessidades, utilizando o “@Tipo de letra" regra. Para isso, é necessário baixar a fonte ou fornecer um link para as fontes do servidor. Mais especificamente, os desenvolvedores precisam de fontes diferentes para seus projetos e, sem a regra @font-face, o sistema será limitado a fontes já instaladas em nosso sistema.

Este blog falará sobre o uso da regra CSS @font-face.

O que é regra CSS @font-face?

A regra @font-face no CSS é utilizada para fazer fontes personalizadas para nossos projetos. Essas fontes podem ser carregadas do servidor ou das fontes instaladas do sistema.

Como usar a regra CSS @font-face?

A sintaxe para usar a regra CSS @font-face é mencionada abaixo:

@Tipo de letra
Fonte-família: MyNewFont;
src: url ()

A regra @font-face é definida especificando um valor na propriedade da família de fontes e o URL relacionado de onde esta fonte está localizada como o atributo src.

Exemplo

No exemplo abaixo, personalizaremos fontes. Para fazer isso, primeiro, baixe as fontes do navegador e adicione -as à pasta do seu projeto. Você também pode usar links se estiver usando fontes do servidor.

Em primeiro lugar, adicione

e

tags e aplique -se para personalizar fontes para cada uma delas. Vamos implementar o cenário acima descrito em três etapas.

Etapa 1: Adicione elementos ao arquivo html

Em html, dentro da seção, adicione

e

Para adicionar algum conteúdo relacionado à página da web:

Bem -vindo ao Linuxhint!

Bem -vindo ao Linuxhint!

Etapa 2: Especifique a regra @font-face no CSS

Para especificar a regra, a palavra -chave “@Tipo de letra”É utilizado no CSS. Dentro de seus colchetes encaracolados, adicione a propriedade da família da fonte e adicione o nome da fonte como seu valor. Em seguida, use a propriedade SRC para especificar o caminho da URL da fonte baixada:

@Tipo de letra
Font-Family: MyFont;
src: url ("/fonts/batuuphat \ script.OTF ");

Da mesma forma, adicionaremos outro bloco de fonte personalizado:

@Tipo de letra
Fonte-família: MyFont2;
src: url ("/fonts/olive_vine \ Demo.OTF ");

Agora, aplique o estilo ao

e

elementos.

Estilo H2 elemento

H2
Font-Family: MyFont;
Size da fonte: 50px;

As propriedades aplicadas ao

O elemento é explicado abaixo:

• ““família de fontes”Está definido com o valor“myfont”Que é o que declaramos na regra @font-face.
• ““tamanho da fonte”Propriedade define o tamanho da fonte para 50px.

Estilo H1 elemento

H1
Fonte-família: MyFont2;
Size da fonte: 70px;
cor marrom;

Aqui o "cor”A propriedade é usada para colorir a fonte.

Pode ser visto a partir da imagem abaixo fornecida que

e

As tags são estilizadas com sucesso com as fontes recém -declaradas:

Fornecemos o método para usar a regra CSS @font-face.

Conclusão

Os estilos de fonte desempenham um papel importante em tornar qualquer aplicativo esteticamente atraente. Nosso sistema possui estilos de fonte limitados, enquanto um desenvolvedor precisa de fontes diferentes para adicionar embelezamento aos seus aplicativos da web. Para fazer isso, o CSS nos permite usar a regra @font-face para adicionar fontes personalizadas. Este artigo demonstrou a regra @font-face através da qual você pode personalizar o estilo de fonte em nosso aplicativo.