Arquivos da categoria: CSS

CSS3: font-face

css31Um problema comum no desenvolvimento de um site é a tipografia (tipo da fonte). É normal o uso de fontes comuns (Arial, tahoma, verdana, etc), que existem nos sistemas operacionais dos diversos dispositivos capazes de executar um website.


font-family: Arial, Verdana, Sans-Serif;

Caso a fonte não exista, o navegador tenta assumir uma próxima fonte que foi definida no CSS (font-family). E se também não encontrar, o navegador vai assumir sua fonte padrão, o que pode “estragar” toda aparência do site.

Com CSS3 conseguimos forçar o navegador a baixar uma fonte caso ela não exista no sistema operacional do dispositivo. Isso pode ser implementado com o uso da diretiva @font-face, e é suportada somente nos navegador mais modernos (IE 9, Firefox, Opera, Chrome e Safari). A fonte deve estar disponível em algum servidor, que pode ser o do próprio site.

A especificação do W3C (http://www.w3.org/TR/css3-fonts/) relaciona os seguintes formatos de fontes suportados pelo font-face:

String Font Format Common extensions
“woff” WOFF (Web Open Font Format) .woff
“truetype” TrueType .ttf
“opentype” OpenType .ttf, .otf
“embedded-opentype” Embedded OpenType .eot
“svg” SVG Font .svg, .svgz

O diretiva @font-face deve estar dentro do arquivo CSS do site:


@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans Light'),
       local('OpenSans-Light'),
       url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

body { font-family: 'Open Sans', Arial, Verdana, Sans-Serif; }
}

Na diretiva @font-face as propriedades especificão:

  • font-family: o nome a a ser usado na regra font-family dos elementos HTML (no exemplo foi aplicado ao body).
  • src: a origem da fonte, sendo que primeiro será procurada localmente (local(‘..’)) no sistema operacional uma fonte com o nome ‘Open Sans Light’, se não encontrar vai procurar ainda localmente (local(‘..’)) um fonte como o nome ‘OpenSans-Light’, e caso não entre localmente, baixará a fonte no servidor informado em url(…). No exemplo acima a fonte está disponível no servidor do Google, mas poderia estar no próprio servidor do site.

Antes de fazer o font-face, é  necessário verificar a licença da fonte para não ter problemas de uso indevido.

Mais detalhes em:

Até mais.

Layout responsive (responsivo)

Olá pessoal.

Estou aproveitando as férias para aprender algumas coisas novas. Bom, com essa moda de smartphones e tablets tem se falado muito em layout responsive ou responsivo. Então vou compartilhar com vocês alguma coisa que aprendi sobre o assunto.

Um site com layout responsivo é um site preparado para qualquer tipo de tela, ou seja, é um site que tem seu layout preparado para “ficar bem” em qualquer dispositivo: computador, televisão, tablet, smartphone, geladeira, torradeira, etc… É possível fazer um layout responsivo com apenas códigos HTML e CSS.

O primeiro conceito importante a entender é o tal do VIEWPORT. Viewport é o nome dado à área disponível para o conteúdo do site, portanto é a área disponível no visor do dispositivo para visualização do site. Quando um site é aberto num smartphone por exemplo, o navegador diminui o zoom para permitir a visualização dentro do viewport, desta forma o site fica miniaturizado com o objetivo de mostrar todo seu conteúdo como se estive num navegador para computador tradicional.

Como navegadores para dispositivos móveis usam o visor (fonte: http://msdn.microsoft.com/pt-br/magazine/jj133814.aspx)

Este site http://msdn.microsoft.com/pt-br/magazine/jj133814.aspx, trás de forma simples algumas explicações sobre VIEWPORT e tamanho de telas. Vale apena conferir.

Uma página preparada para dispositivos com telas de tamanhos diferentes deve possuir  a META tag viewport no seu head:

<meta name="viewport" content="width=device-width" />

A propriedade width desta meta tag com o valor device-width, diz ao navegador para não renderizar a página de forma miniaturizada e assim  assumir a largura da mídia. No caso de uma mídia digital é o tamanho da tela. No caso de impressão é o tamanho da folha.

Figura 1: Página sem layout responsivo e visualizada num smartphone.

Figura 2: Página sem layout responsivo e com a meta tag viewreport.

Observe que na figura 1 o site ficou miniaturizado, comportamento padrão nos navegadores mobile. Enquanto na figura 2, a página possui a meta tag viewport e o navegador renderizou sem o efeito miniaturizado. Neste último caso temos o problema da barra de rolagem na horizontal, portanto ainda não é um layout adequado para um dispositivo mobile.

Agora é a vez de desenvolver o CSS do layout e suas customizações para outros tamanhos de tela com o uso de Media Queries.

Media Queries é um recurso disponível na CSS 3, é uma evolução dos Media Types da CSS 2, e fornece maneiras de verificar qual o dispositivo, como também verificar a largura e altura no navegador, orientação, resolução, etc. Bacana né?

Vamos a um exemplo simples.

HTML estrutural do site:

<div id="corpo">
<div id="barra-esquerda">parte 1</div>
<div id="conteudo">parte 2 parte 2 parte 2 parte 2 parte 2.</div>
<div id="barra-direita">parte 3</div>
</div>

CSS preparado para alguns tipos de dispositivos.

/* CSS padrão - preparado para telas com 1024 de largura ou mais */
* {margin: 0; padding: 0;}
body {font-size: 12px;}
#corpo {width: 960px; margin: 0 auto; }
#barra-esquerda {width: 20%; min-height: 100px; background-color: Aqua; float: left; }
#conteudo {width: 60%; min-height: 100px; background-color: Yellow; float: left; }
#barra-direita {width: 20%; min-height: 100px; background-color: Aqua; float: left;}

/*Media Querie 1: Para adequação do layout em telas menores que 900px de largura */
@media screen and (max-width: 900px)
{
    #corpo {width: 100%; }
    #barra-esquerda, #conteudo, #barra-direita {width: 100%; float: none; margin: 0; }
}

/*Media Querie 2: Para adequação do layout em telas menores que 400px de largura */
@media screen and (max-width: 400px)
{
    #barra-esquerda {display: none; } /*Escondendo a barra lateral da esquerda*/
}

No código CSS acima observe o uso da medida em percentual (%)  para os blocos (div) do layout, além das medias queries:  a media querie 1 é ativada quando a página é aberta em dispositivo com largura de tela até 900px, e a segunda quando o dispositivo tem largura de tela até 400px. As duas media queries implementam customizações no CSS padrão para os dispositivos de telas menores. Em outras situações, o navegador assume o CSS padrão sem as customizações. A ideia central aqui é ter um CSS padrão e customizar para outros dispositivos, desta forma não sendo necessário ter sites diferentes.

Vejamos o resultado final.

Layout responsivo num navegador para smartphone.

O mesmo layout responsivo num navegador para desktop.

O resultado é que temos praticamente o mesmo layout em dispositivos diferentes. É um exemplo simples, mas é um bom começo para começar a pensar no desenvolvimento sites para diversos dispositivos.

Baixe aqui o exemplo completo.