Essa lição é um pouquinho maior, pois vamos juntar todos os nossos conhecimentos para editar uma fonte: propriedades, tamanhos, cores e tudo mais, além de que adicionarei mais algumas coisinhas novas. O ideal é ler todas as lições para compreender tudo de maneira correta e se familiarizar com os termos aqui presentes. Vamos começar com o nosso modelo estrutural, assim ficará tudo bem mais fácil para você. As fontes são usadas em qualquer texto do blog, logicamente. Em títulos de gadgets, títulos de um cabeçalho, texto do blog, links e mais. Antes de tudo, observe a tabela de seletores abaixo, são os mais importantes do blogger e você com toda certeza vai utilizar um dia. Preste bem atenção na tabelinha.
h3.post-title a - Seletor para título da postagem.body - Seletor para o corpo do blog..main-inner h2.date-header - Seletor para data..sidebar h2 - Seletor para título dos gadgets.
Ou seja: Esses são os seletores onde você pode editar a fonte e futuramente outras coisas dos elementos que representam. Lembrem-se de que os seletores precisam ser seguidos de { e após a adição de propriedades e valores devem ser fechados com }. Nunca esqueçam disso, é muito importante.
- Estrutura
A estrutura é obtida a partir de um seletor, como já sabemos. Colocamos a propriedade font-family para indicar a fonte que vamos usar em um determinado texto. É bem simples, veja abaixo o exemplo básico.
.sidebar h2 {font-family: Tahoma;font-size: 15px;color: #ffccff;text-shadow: #666 0px 1px 1px;}
A parte em negrito representa nosso seletor, nosso elemento a ser editado e a partir da tabelinha posta anteriormente, sabemos que representa o título dos gadgets. A parte sublinhada representa as propriedades, sendo font-family a propriedade que possibilita a escolha da fonte usada no texto e a parte colorida representa cada um dos valores, onde todos já foram estudados.
- Font-family
Já sabemos que o font-family é o que indica a fonte que escolhemos para utilizar em um determinado local, mas existe uma pequena limitação: Podemos apenas usar as fontes que já estão dentro dos padrões, ou seja: As fontes mais básica como Tahoma, Verdana e Arial. É claro que existe um meio de utilizar fontes diferenciadas e é aí que entra o font-face. O font-face é bem simples de ser usado.
1. Hospedamos a fonte que queremos. Quando baixamos uma fonte, temos um arquivo em .ttf, que é o arquivo usado para instalação, então hospede-o bem aqui.
2. Acima do seletor onde deseja utilizar a aquela fontes, você deve colar o código abaixo, substituindo a parte em negrito pelo link que apareceu ao hospedar.
@font-face {font-family: "nomedafonte"; src: url('link da fonte');}
3. Por fim, é bem simples: Ali no nome da fonte você coloca qualquer palavra, pode ser ou não o nome real da sua fonte, você escolhe. Na hora de colocar em uso, vai ficar assim:
@font-face {font-family: "Slash"; src: url('http://static.tumblr.com/0xqvkot/rZLmgsrm9/fineness_regular.ttf');}.sidebar h2 {font-family: Slash;font-size: 15px;color: #ffccff;text-shadow: #666 0px 1px 1px;}
Observe que substituí o nome da fonte por Slash e no valor para font-family, digitei o mesmo. É super simples. Até a próxima aula!
