CSS – Variaveis do Tipo Fonte

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Você já conheceu e já entendeu sobre as Variáveis Cor e Fonte(Variable Definition) no outro post. Já viu como criar uma variável do tipo cor e uma variavel do tipo fonte.
Agora vai aprender um pouco mais sobre a variável do tipo fonte.
Antes de criar ou editar qualquer variável do tipo fonte no seu template, é necessário entender alguns conceitos básico a respeito de Fontes e como aplicá-las usando CSS.

Uma fonte só é visível para o leitor, se o navegador reconhecer esta fonte, ou seja, é necessário que o seu leitor tenha esta fonte gravada em seu computador, caso contrário não iria visualizá-la, mas o CSS fornece um mecanismo para compensar esta lacuna, tornando a fonte visível, para que ela seja visualizada pelo leitor mesmo não estando instalada em seu sistema operacional. Com o CSS você pode definir uma lista de fontes para seu documento a serem usadas na ordem que você definiu (se a primeira da lista não estiver disponível no computador do leitor, será usada a segunda e assim por diante).Para isto você precisa descrever algumas propriedades CSS aplicáveis às fontes, que são elas:
? font-family
? font-style
? font-weight
? font-size
? font-variant

Família de fontes (font-family):

Existem dois tipos de nomes para definirmos fontes:
1) nomes para famílias de fontes – normalmente conhecidas como “font”, se caracterizam por serem fontes normais sem serifa.
2) nomes para famílias genéricas – são fontes que pertencem a um grupo com aparência uniforme(genérica), se caracterizam por serem fontes normais com serifas.

Exemplo:

Ao definir fontes para o seu blog, comece definindo aquela fonte preferida, seguindo-se de algumas alternativas para ela, e encerre a listagem das fontes com uma fonte genérica, assim se o navegador do usuário não encontrar na memória do computador a primeira fonte, usará a segunda e assim por diante.
Exemplo:

.post-body {
font-family: 'Trebuchet MS', Arial, Serif;}

No exemplo acima, a fonte escolhida para os textos da página é Trebuchet MS, Arial e Serif são as fontes genéricas. A primeira fonte a ser procurada pelo navegador do leitor deverá ser a Trebuchet MS e na falta dela, Arial. Se ambas estiverem indisponíveis no computador do leitor será usada uma fonte da família serif(fonte generica).
Notem que para especificar a fonte “Trebuchet MS” foram usadas aspas. Pra fontes com nomes compostos e que contenham espaços entre os nomes, é necessário o uso de aspas.

Estilo das fontes (font-style) :

A propriedade font-style define a escolha da fonte em: normal, italic ou oblique.
Você deve definir o estilo de fonte para cada elemento.
Exemplo: Se desejarmos que a fonte do texto de nossa página se apresente em itálico, devemos colocar o CSS assim:

.post-body {
font-style: italic;}

Dessa forma, qualquer texto publicado no seu blog, as fontes se apresentarão em itálico.

Peso das fontes (font-weight):

Uma fonte pode ser normal ou bold (negrito).
Esta propriedade é que define o quão escura esta fonte deve ser.
Os valores possíveis suportados por alguns navegadores são: 100-900 (em intervalos de 100 em 100) para definir o peso da fonte.

Tamanho da fonte (font-size):

Esta propriedade que define o tamanho da fonte, que pode ser especificados por valores relativo ou absoluto.
Veja alguns dos valores suportados no blogger:
– pt (pontos)
– px (pixels)
– em
– %(percentagem)
– xx-small
– x-small
– small
– medium
– large

Exemplos:

.post-body {font-size: 14px;}
.post-body {font-size: x-small;}
.post-body {font-size: 80%;}

Fonte variante (font-variant)

Esta propriedade é usada para escolher as variantes normal ou small-caps. A variante small-caps é aquela que transforma letras em maiúsculas de menor altura (tamanho reduzido).
Exemplo:

.post-body {font-variant: small-caps;}

Agora que você entendeu um pouco mais a respeito de fontes, vamos relembrar a Variable Definition do tipo fonte, que você viu no artigo anterior?

Vamos ver a variável “bodyfont” conforme se apresenta no código do template minima:

<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100%
Georgia, Serif">

Em vermelho: é o nome da variável, sem espaços.
Em azul:é a descrição da variável, pode conter espaços
Em verde:é o tipo da variável, que neste caso é font.
Em laranja:é a fonte padrão (font-style,font-weight, font-family)
Em marron: é a fonte escolhida (font-style,font-weight, font-family)

No template Minima, as variáveis do tipo fonte são: bodyfont, headerfont, pagetitlefont,descriptionfont e postfooterfont.

Agora vamos criar uma nova variável do tipo fonte para aplicarmos aos Titulos da Sidebar:

<variable name="sidebartitlefont" description="Titulo da Sidebar"type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 100% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

 

Esta variável “sidebartitlefont” está definida como um tipo fonte na descrição “Titulo da Sidebar”, onde foi estabelecido que a letra será normal e em negrito, com tamanho da fonte em 100% e que a primeira fonte a ser procurada pelo navegador deverá ser a Trebuchet MS (note que está entre aspas), e na falta dela, Trebuchet e assim por diante.
Agora vamos aplicar esta variável criada ao titulo da sidebar.(No template mínima não existe a regra css para o título da sidebar).
O que vou fazer é dar valores diferentes para a propriedade “h2” do seletor “Sidebar”, criando a seguinte regra:

.sidebar h2{
font: $sidebartitlefont; }

Para que a variável funcione é preciso acrescentar o símbolo $ antes dela.

Mas se você preferir, pode definir os valores diretamente na regra css para cada seletor, desta maneira:

.sidebar h2{
font-size: 100%;
font-weight: bold;
font-family: 'Trebuchet MS',Trebuchet,arial,verdana, Sans-Serif;
color: #000000;
}

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn