Scroll Top

Aprenda tudo que você precisa para criar o seu negócio na internet.  São 30 vídeos aulas totalmente gratuitas. Basta se cadastrar em um de nossos formulário.

Tutoriais

Trabalhando fontes com CSS em todos os estilos

CSS

Para você que está trabalhando com sites, estudaremos as fontes e como aplicá-las usando CSS. Veremos como criar situações para que determinada fonte seja visualizada pelo usuário mesmo não estando instalada em seu sistema operacional. Mas você irá entender melhor trabalhando estas fontes em seu próprio site, deve prestar muita atenção nesta postagem.

Família de fontes [font-family]

A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina do usuário, deverá ser usada a segunda e assim por diante até ser encontrada uma fonte instalada.

Existem dois tipos de nomes para definir fontes: nomes para famílias de fontes e nomes para famílias genéricas. Os dois são explicados a seguir:

Nome para famílias de fontes:
Exemplos para este tipo (normalmente conhecidas como “font”) são “Arial”, “Times New Roman” ou “Tahoma”.

Nome para famílias genéricas:
Famílias genéricas são fontes que pertencem a um grupo com aparência uniforme. Um exemplo são as fontes sans-serif que englobam a coleção de fontes que “não têm pé”.

trabalhando

 

Ao listar fontes para seu website, comece com aquela preferida, seguindo-se algumas alternativas para ela. É recomendável encerrar a listagem das fontes com uma fonte genérica. Assim fazendo, em último caso a página será renderizada com fonte da mesma família das que foram especificadas quando todas as demais estiverem indisponíveis na máquina do usuário. Mas para entender melhor, só trabalhando.

A seguir mostramos um exemplo de listagem de fontes:

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: “Times New Roman”, serif;}

Cabeçalhos <h1> serão renderizados com fonte “Arial”. Se o usuário não tiver a font Arial instalada, será usada a fonte “Verdana”. Se ambas estiverem indisponíveis na máquina do usuário será usada uma fonte da família sans-serif.

Note que para especificar a fonte “Times New Roman” foram usadas aspas. Isto é necessário para fontes com nomes compostos e que contenham espaços entre os nomes.

Trabalhando Estilo da fonte [font-style]

A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No exemplo a seguir todos as cabeçalhos <h2> serão em itálico.

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: “Times New Roman”, serif; font-style: italic;}

 

Fonte variante [font-variant]

A propriedade font-variant é usada para escolher as variantes normal ou smallcaps. Uma fonte small-caps é aquela que usa letras maiúsculas de tamanhos reduzidos. Confundiu? Dê uma olhada nos exemplos a seguir:

Se a propriedade font-variant for definida para small-caps e não estiver disponível na máquina do usuário, será usada fonte em maiúscula.

h1 {font-variant: small-caps;}

h2 {font-variant: normal;}

 

Clique aqui para continuar a aula  e ver Peso da fonte [font-weight]

 

Continue trabalhando, pois assim, você terá a oportunidade de criar efeitos fenomenais em seus sites.

 

<<<Voltar —

 

Está Gostando do Artigo?

Se inscreva em nossa lista e receba 30 vídeos aulas grátis, ensinando como criar o seu negócio na internet a partir do zero.

| Website

Sou blogueiro por que gosto de ler e escrever. Criei este blog para te ajudar a criar o seu negócio na internet e ter um novo estilo de vida.

  • I simply want to tell you that I’m newbie to blogging and site-building and honestly savored this web-site. Most likely I’m likely to bookmark your blog . You certainly have wonderful posts. Cheers for revealing your web page.

    Tradução:
    Eu simplesmente quero dizer que eu sou novato em blogs e site de construção e honestamente saboreado este web-site. O mais provável é que eu sou provavelmente para marcar o seu blog. Você certamente tem mensagens maravilhosas. Felicidades para revelar a sua página web.

  • Excellent content and an enjoyable read on this lovely English evening

    Tradução:
    Excelente conteúdo e uma leitura agradável sobre esta linda noite Inglês

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
error: Este conteúdo está protegido ! Se precisar de alguma coisa envie mensagem pelo formulário de contato.