Lista de Famílias de Fontes Javascript

ast Python module | base64 Python module | code Python module | COM PHP module | dis Python module | Ev PHP module | exp | html Python module | http Python module | imp Python module | io Python module | JavaScript | os Python module | PS PHP module | Python functions | re Python module | select Python module | sep | site Python module | SPL PHP module | StackOverflow | time Python module | UI PHP module

Michael Zippo

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:

• serif: as fontes usam a fonte serif (por exemplo, Lucida Bright, Palladio).
• sans-serif: as fontes usam a fonte sans-serif (por exemplo, Open Sans, Trebuchet MS).
• monospace: os caracteres são todos da mesma largura (por exemplo, minivan, Menlo).
• itálico: os caracteres têm um hífen (ex. Lucida Calligraphy).
• fantasy: Fontes decorativas usadas para chamar a atenção para as fontes (ex. Papyrus).

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 " noscript> 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 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.