Lista de Famílias de Fontes Javascript

| | | | | | | | | | | | | | | | | | | | | |

A formatação de texto em uma página da web é uma parte importante do design da web. Por exemplo, você pode querer que os cabeçalhos apareçam em uma fonte específica ou que todo o texto de uma página use a fonte serif.

É aqui que o CSS fonte está localizada: a família entra em jogo. A propriedade CSS font-family permite que você especifique uma ou mais famílias de fontes que serão usadas para estilizar o texto em uma página da Web.

Este tutorial cobrirá o básico referindo-se a exemplos de CSS font-family e como você pode usar a propriedade para estilizar o texto em uma página da Web.

CSS Font Family

Há muitos aspectos envolvidos no estilo de uma fonte em CSS, de definir uma cor para o tamanho. a polícia. Uma das partes mais importantes de um estilo de fonte, no entanto, é definir a família de fontes, que é o estilo usado pelo texto em uma página da Web.

Defina a família de fontes usada pelo texto em um página da web, você pode usar a propriedade font-family. A sintaxe da propriedade font-family é a seguinte:

A propriedade font-family aceita uma única fonte ou uma lista de fontes. Se você especificar mais de um caractere, deverá separar cada caractere com uma vírgula.

A ordem em que os caracteres são exibidos é a ordem em que o navegador tentará aplicar os caracteres. O navegador será padronizado para a primeira fonte na lista que está instalada ou pode ser baixada do navegador da web. Se este caractere não estiver disponível, o segundo caractere será usado e assim por diante.

É importante observar que a propriedade font-family selecionará uma fonte para cada caractere em um bloco de texto. Então, se um caractere específico não estiver disponível em uma fonte, a próxima fonte de sua fonte na lista de família será tentada, até que um caractere adequado seja encontrado.

Ao usar o peso da fonte, é melhor incluir pelo menos uma fonte genérica de sobrenome (como serif, sans-serif ou monospace). Isso garante que, se outra fonte na lista não estiver disponível, o navegador ainda poderá selecionar uma fonte para o texto em uma página da Web a ser exibida.

Há duas maneiras de usar a propriedade font-family. Primeiro, você pode usar a propriedade para especificar uma fonte personalizada para uma página da web. Segundo, você pode usar a propriedade para aplicar uma família de fontes genérica ao texto em uma página da web. As famílias de fontes genéricas disponíveis para uso com a propriedade font-family são as seguintes:

Existem outras famílias de fontes genéricas disponíveis, que você pode ler com mais detalhes em Documentação da família de fontes CSS do Mozilla .

Agora que conhecemos o básico da propriedade font-family, podemos ver alguns exemplos de como ela funciona em ação .

Exemplos de famílias de fontes CSS

Um selo local nos pediu ao clube, o Seattle Stamp Club, para personalizar as fontes para partes de seu site.

Em primeiro lugar, nos pediram para alterar a fonte de todos os cabeçalhos

na página "Contatos" para usar o "Open Sans" Fonte. Assim, por exemplo, o "Fale Conosco" na página "Fale Conosco" de seu site deve aparecer no Open Sans. Se esta fonte não estiver disponível, a família genérica "sans-serif" deve ser usada. Poderíamos usar o seguinte código para fazer isso:

Clique `Imagem" noscript> `Image botão no editor de código acima para ver a saída do nosso código HTML/CSS .

Em nosso código HTML, especificamos um cabeçalho usando uma tag

que contém o texto Fale Conosco . Portanto, em nosso código CSS, usamos a família de fontes para definir a fonte para os elementos

em nossa página da Web.

O valor que atribuímos à propriedade font-family define a fonte para todos os elementos

em Abra Sans e, se esta fonte não estiver disponível, a família genérica sans-serif é usada. Para isso, especificamos dois caracteres, separados por uma vírgula.

Agora suponha que também queremos aplicar um estilo a todos os caracteres

elementos da página Contatos do clube de carimbos para usar a fonte Times. Se esta fonte não estiver disponível, uma fonte serif padrão deve ser usada. Podemos usar o seguinte código para fazer isso:

Clique `Imagem 24" no editor de código acima para ver a saída do nosso código HTML/CSS.

Em nosso exemplo, declaramos um parágrafo de texto usando uma

tag . Em seguida, definimos a família de fontes de todas as

tags em nossa folha de estilo CSS para usar as Times e serif. Por padrão, o navegador tentará exibir todas as

tags na fonte Times. Se esta fonte não estiver disponível, a fonte serif a fonte é usada.

Conclusão

A propriedade CSS font-family permite especificar o estilo do texto de uma página web. Por exemplo, você pode usar a propriedade font-family para usar a propriedade de fonte " Arial " ou a fonte genérica " Italic " para todo o texto em uma página da Web.

Este tutorial explicou, consultando para exemplos, o básico da propriedade CSS font-family e como você pode usá-la para estilizar o texto em uma página da web. Agora você está pronto para começar a usar a propriedade da família de fontes como um web designer especialista!