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.
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!