Este blog falará sobre o uso da regra CSS @font-face.
O que é a regra CSS @font-face?
A regra @font-face em CSS é utilizada para criar fontes personalizadas para nossos projetos. Essas fontes podem ser carregadas do servidor ou das fontes instaladas no sistema.
Como usar a regra CSS @font-face?
A sintaxe para usar a regra CSS @font-face é mencionada abaixo:
@Tipo de letra {
família de fontes : MyNewFont ;
origem : url ( )
}
A regra @font-face é definida especificando um valor na propriedade font-family e a URL relacionada de onde esta fonte está localizada como o atributo src.
Exemplo
No exemplo abaixo, vamos personalizar as fontes. Para 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 as tags
e e, em seguida, aplique para personalizar as fontes de cada uma delas. Vamos implementar o cenário descrito acima em três etapas.
Etapa 1: adicionar elementos ao arquivo HTML
Etapa 1: adicionar elementos ao arquivo HTML
Em HTML, dentro da seção
, adicione e para adicionar algum conteúdo relacionado à página da web:
< h2 > Bem-vindo ao Linuxhint! < / h2 >
< h1 > Bem-vindo ao Linuxhint! < / h1 >
Etapa 2: especifique a regra @font-face em CSS
< h2 > Bem-vindo ao Linuxhint! < / h2 >
< h1 > Bem-vindo ao Linuxhint! < / h1 >
Etapa 2: especifique a regra @font-face em CSS
Para especificar a regra, a palavra-chave “ @Tipo de letra ” é utilizado em CSS. Dentro de seus colchetes, adicione a propriedade font-family 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 {
família de fontes : minha fonte ;
origem : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
Da mesma forma, adicionaremos outro bloco de fonte personalizado:
@Tipo de letra {família de fontes : minhafonte2 ;
origem : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Agora, aplique o estilo aos elementos
e .
Estilo elemento h2
h2 {
família de fontes : minha fonte ;
tamanho da fonte : 50px ;
}
Estilo elemento h2
h2 {família de fontes : minha fonte ;
tamanho da fonte : 50px ;
}
As propriedades aplicadas ao elemento
são explicadas a seguir:
- “ família de fontes ” é definido com o valor “ minha fonte ” que é o que declaramos na regra @font-face.
- “ tamanho da fonte ” define o tamanho da fonte para 50px.
Estilo elemento h1
h1 {
família de fontes : minhafonte2 ;
tamanho da fonte : 70px ;
cor : Castanho ;
}
Aqui o ' cor ” é usada para colorir a fonte.
Pode ser visto na imagem fornecida abaixo que as tags
e foram 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 tem estilos de fonte limitados, enquanto um desenvolvedor precisa de fontes diferentes para adicionar embelezamento a 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 por meio da qual você pode personalizar o estilo da fonte em nosso aplicativo.