CSS oferece várias propriedades para Personalize a fonte estilo de um elemento de texto. Da alteração do tamanho da fonte e da cor para definir família de fontes, Cada propriedade tem seu próprio significado. Os formatos de texto também afetam muito a legibilidade do site; Portanto, a seleção da fonte certa é crucial para tornar o seu site acessível.

Este artigo vai discutir Propriedade da família de fontes CSS com a ajuda de exemplos adequados. Então vamos começar!

Propriedade da família de fontes CSS

O “Propriedade da família de fontes” Lista as letrações em ordem prioritária. A seleção de fontes não termina com a primeira fonte na lista de fontes do sistema do usuário. Em vez disso, as fontes são escolhidas um personagem de cada vez, de modo que, se uma fonte disponível não possui um glifo para uma letra necessária, as fontes subsequentes são tentadas.

A seleção da família de fontes é impactada pelas características, como a disponibilidade de um tipo de letra em alguns estilos, versões ou tamanhos.

Tipos de nomes da família de fontes CSS

A propriedade da família de fontes contém uma lista de famílias de fontes separadas por vírgulas. Os nomes da família de fontes CSS são divididos em dois tipos de nomes:

• Nome da família da fonte: Um nome de fonte-família é o nome do tipo de letra. As famílias de fontes compreendem nomes como “helvética" e "Vezes““. O nome da família da fonte pode conter espaços brancos, por isso deve ser dado em citações como: “Comic Sans MS”.
• Nome familiar genérico: Quando nenhuma das fontes especificadas é acessível, as famílias de fontes genéricas servem como um opção de fallback. Você não precisa especificar o nome da família genérico em citações porque elas são palavras-chave, e sua lista de nomes de família de fontes deve terminar com uma família de fontes genéricas.

Agora vamos conferir um exemplo de utilização de nome familiar e genérico como nomes de família como nomes de fontes.

Exemplo: Propriedade da família CSS

No exemplo abaixo, definiremos o valor da primeira propriedade da família, especificando “Time New Roman”Como o nome da família de fontes, e“Vezes", e "serif”Como nome familiar genérico. Considerando que, na segunda família de fontes, "Arial", "Helvetica" e "Sans-Serif" são adicionados como nomes de família genéricos:

A propriedade da família-fonte

É uma fonte "Times New Roman".

É uma fonte "Arial".

Depois de salvar o código adicionado, quando você abrir seu HTML no navegador, ele mostrará o estilo da fonte dos elementos de texto de acordo com os valores especificados do nome da família da fonte e o nome da família genérica:

Agora demonstraremos o uso de diferentes palavras -chave envolvidas na categoria genérica familiar.

Categoria Genic-Family

Os glifos que acabaram com traços ou finais com serifados reais são chamados de “serif”. Esta categoria de família genérica inclui Times New Roman, Geórgia, Garamond e muitas outras famílias de fontes.

Exemplo: categoria serif-familiar serif com serif

A propriedade da família-fonte

É uma fonte "Times New Roman" que pertence à família de fontes serif.

Saída

Categoria CSS Sans-Serif-Família Genérica

Ao contrário de Serif, os glifos em Sans-serif tem terminações simples. Por exemplo, Lucida Sans, Open Sans, Arial, Lucida Sans Unicode, Helvetica, Trebuchet MS, Fira Sans estão incluídos na categoria Sans-Serif-Família genérica.

Exemplo: CSS Sans-Serif Categoria genérica-família

A propriedade da família-fonte

É uma fonte "Arial" que pertence à família de fontes sem serrif.

Saída

Categoria CSS Monospace Genic-Family

Todos esses glifos com um uniforme e de largura fixa ao longo são denominados Monospácia-por exemplo, "Console Lucida", "Courier New", "Mono".

Exemplo: categoria CSS Monospace Genic-Family

A propriedade da família-fonte

É uma fonte "Lucida" que pertence à família Monospace Font

Saída

Categoria de família genérica cursiva CSS

Ao contrário dos tipos de letra em itálico, cursivo Os glifos geralmente aparecem conectando traços ou outro traços cursivos. O tipo de letra se assemelha à redação do pincel ou de uma caneta manuscrita em vez de letras impressas. Os glifos são unidos parcialmente ou totalmente alguns nomes de fontes como “Comic Sans MS", e muitos outros.

Exemplo: categoria CSS Cursive Genic-Family

A propriedade da família-fonte

É a fonte "Comic Sans MS" que pertence à família de fontes cursivas

Saída

Compilamos as informações essenciais relacionadas à propriedade CSS-Font-Family. Você pode explorá -lo ainda mais de acordo com suas preferências.

Conclusão

O Propriedade da família de fontes CSS é usado para especificar o nome da família da fonte ou texto. Os nomes da família de fontes CSS são divididos em dois tipos: “Nome da família da fonte" e "Nome familiar genérico”, Onde o nome da fonte da fonte é o nome do tipo de letra, e as famílias de fontes genéricas servem como uma opção de substituição. O Propriedade da família de fontes CSS pode levar uma lista de famílias de fontes que são separadas por vírgulas. Este artigo discutiu Propriedade da família de fontes CSS com a ajuda de exemplos adequados.