- Esta postagem é grande pelo fato de ter muitos exemplos e dicas, por isso numerei e criei um índice:
- Font-family(Tipo, família)
- Font-style(Itálico, Oblíquo)
- Font-variant(Maiúscula M)
- Font-weight(Negrito)
- Font-size(Tamanho)
- Agrupar propriedades de fontes
- Cor da fonte
- Mudar a fonte no Css do BlogSpot
É bastante apropriado para quem quer fazer alterações no estilo do BlogSpot, mas, lembrando que no blogger.com pode existir a opção de mudar algumas fontes e cores sem uso de códigos.
As fontes podem ser classificadas por "familia" visando as características que tem em comum e, também pode adicionar características extras, itálico, negrito, etc.
Nem todas as fontes estão no Pc(computador) do visitante, para isso tem uma solução(mais abaixo), que é colocar o nome da familia da fonte, ou, menos apropriado é fonte incorporada(leia aqui)
Em alguns casos pode predominar as configurações do navegador, nesses raros casos é a vontade do usuário que manda.
Se você visualizar as fontes dos exemplos abaixo, no formato desse texto isso significa que ela é muito parecida ou não está instalada em seu Pc.
Cada nome de fonte abaixo está escrito com o seu tipo, porém dependendo das configurações ou fontes indisponíveis em seu Pc você verá no formato desse texto ou com a fonte escolhida nas configurações de seu navegador. Essa fonte...?Font-family, Apresentando as fontes
- sans-serif: Fontes que tem em comum o fato de não ter serifas, aquele pézinho nas letras.
Arial, Helvetica, Helvetica Narrow, Lucida, Lucida grande, Tahoma, Trebuchet , Trebuchet MS, Verdana
- serif: Fontes com serifas ou "pé"
Bookman, Garamond, Georgia, New Century Schoolbook, Palatino, Times, Times New Roman,
- Monospace: Como sugere o nome, possui único espaço, ou seja, cada letra ou caracter vai ter a mesma largura, a letra i ou a m que em outros tipos de fontes geralmente teriam uma largura diferente, nesse estilo terão "direitos iguais", isso pode fazer, num texto, com que cada letra fique alinhada com as letras da linha de cima, a menos que você altere o tamanho da fonte de algumas palavras
Andale Mono, Courier, Courier New, Fixed, Lucidatypewriter
- Cursive:
Coronetscript, Comic Sans, Comic Sans MS, Florence, Parkavenue, Zapf Chancery
- fantasy:
Arnoldboecklin, Blippo, Brushstroke, Impact, Oldtown,
Webdings, Essa fonte encontrei no blogger, não sei a que família pertence, nem tenho ela instalada. Será adotada? - Quando uma fonte tem "dois nomes", ou seja, seu nome é separado por espaço ela deve ir entre aspas
- É bom usar um grupo de fontes parecidas para aquele mesmo título, texto, links ou qualquer palavra em seu site que costuma ter um padrão, isso porque se o usuário usar outro computador que não tenha aquela fonte que tinha no dele, aparecerá outra e, se essa for muito diferente ele pode estranhar a brusca mudança, pensando se tratar de uma página falsa, ficar meio perdido, etc. Expl:
Se você especificar para seu título font-family: verdana, curvice, 'Times New Roman', fantasy; e no Pc do usuário tiver Verdana, mas ele for usar um Pc que não tem essa fonte vai aparecer uma Curvice onde ele estava acostumado a ver verdana, se aparecesse uma Arial ele talvez nem notaria.
Exemplo de código com tipos de fontes em algum título
<HTML>
<HEAD>
<style type="text/css">
h4 {font-family: verdana, arial, 'Helvetica Narrow', sans-serif;
font-size: 1.3em;
}
</style>
</HEAD>
<BODY>
<h4>Exemplo de código com tipos de fontes em algum título<h4>
</BODY>
</HTML>
Resultaria em um sub-título parecido com esse acima, que seria com fonte verdana, se não houver essa no Pc do usuário seria usado Arial caso não houvesse nem uma o navegador escolhe uma, possivelmente da familia Serif. E seu tamanho font-size- Detalhes:
- sans-serif: Fontes que tem em comum o fato de não ter serifas, aquele pézinho nas letras.
Font-style, Estilo para as fontes
- Três estilos podem ser adicionados as fontes, são eles:
- font-style: oblique; oblique
- font-style: italic; italic
- font-style: normal; normal
- sans-serif: Arial, Helvetica, Helvetica Narrow, Lucida, Lucida grande, Tahoma, Trebuchet , Trebuchet MS, Verdana
- serif: Bookman, Garamond, Georgia, New Century Schoolbook, Palatino, Times, Times New Roman,
- monospace: Andale Mono, Courier, Courier New, Fixed, Lucidatypewriter
- cursive: Coronetscript, Comic Sans, Comic Sans MS, Florence, Parkavenue, Zapf Chancery
- fantasy: Arnoldboecklin, Blippo, Brushstroke, Impact, Oldtown,
Essas fontes e esse pequeno texto estão no estilo oblique. Cada nome de fonte está com o seu nome sendo usado para si mesma, porém elas dependem de outros fatores(citado acima) para serem vistas no seu tipo.Exemplo de código com fonte-style em um título(italico)
<HTML>
<HEAD>
<style type="text/css">
h5 {font-style: italic;
font-family: verdana, arial, sans-serif;
font-size: 1.3em;
}
</style>
</HEAD>
<BODY>
<h5>Exemplo de código com fonte-style em um título(italico)<h5>
</BODY>
</HTML>
Adicionei o estilo itálico nesse pequeno texto e no sub-título acima para servir de exemplo, nesse texto usei apenas o italic para você ver se nota alguma diferença com aquele acima que usa oblique.Font-variant: small-caps; Fonte escrita em letras maiúsculas
- Acredito que a maioria das pessoas não gostariam de ler um texto nesse formato, mesmo sendo maiúscula reduzida, até por isso quase não se vê páginas web escritas assim, pode ser um bom formato para títulos, etc.
- Sans-serif: Arial, Helvetica, Helvetica Narrow, Lucida, Lucida grande, Tahoma, Trebuchet , Trebuchet MS, Verdana
- Serif: Bookman, Garamond, Georgia, New Century Schoolbook, Palatino, Times, Times New Roman,
- Monospace: Andale Mono, Courier, Courier New, Fixed, Lucidatypewriter
- Cursive: Coronetscript, Comic Sans, Comic Sans MS, Florence, Parkavenue, Zapf Chancery
- Fantasy: Arnoldboecklin, Blippo, Brushstroke, Impact, Oldtown,
Exemplo de código com small-caps
h5 {font-variant: small-caps;
O código acima seria usado no Css entre as head, ele faria as palavras e letras do título <h5> ficar em um formato parecido com o título acima(Exemplo de códigocom small-Caps).
font-family: verdana, arial, sans-serif;
font-size: 1.3em;
}Font-weight: bold; Popular negrito
- Ótimo para dar destaque a palavras importantes, estou usando ela para destacar uma palavra importante nesse texto, Opss!!, tá tudo em negrito e não tem como saber que palavra eu coloquei em negrito. Por esse e outros motivos raramente é usado em todo o texto.
- sans-serif: Arial, Helvetica, Helvetica Narrow, Lucida, Lucida grande, Tahoma, Trebuchet , Trebuchet MS, Verdana
- serif: Bookman, Garamond, Georgia, New Century Schoolbook, Palatino, Times, Times New Roman,
- monospace: Andale Mono, Courier, Courier New, Fixed, Lucidatypewriter
- cursive: Coronetscript, Comic Sans, Comic Sans MS, Florence, Parkavenue, Zapf Chancery
- fantasy: Arnoldboecklin, Blippo, Brushstroke, Impact, Oldtown,
Pode ser usado em links, próximo deles para chamar a atenção do visitante para outros artigos, em pequenos sub-títulos, para organizar e classificar partes de um texto ou página, etc. Abaixo o nome das fontes usando font-weight: bold;Exemplo de código com Font-weight
a {font-weight:bold;
color:#004EF9;
}
O código acima é usado no css entre as head, ele faz o link ficar em negrito, e azul, mas não causa nem afeta outros efeitos como cor, porém o efeito passar o mouse está em outro código,ficaria parecido com esse link:
Aumentar título da postagem no BlogspotFont-size: Tamanho da fonte
O tamanho da fonte é, para alguns mais complicado de entender, mas não de fazer ajustes em um layout pronto, se você entende um pouco de CSS terá facilidade.
Alguns tipos de tamanhos:
px, pt, em, cm, %, xx-large, x-large, large, medium, small, x-small, xx-small, larger, smaller...
Você deve ter em mente que a melhor forma é especificar um tamanho para body e os outros locais usando porcentagem(%) ou valor multiplicado(em). Porém, nem tudo vai ser diretamente relativo a body.
O tamanho mais adequado a usar para body seria um valor relativo(...large, medium, small, x-small...) porque esses valores respeitam melhor o tamanho da fonte do navegador do usuário, permite a ele mudar o tamanho da fonte do navegador e ter resultados nas suas páginas. Se você escolher small a fonte será um pouco menor que o tamanho que ele usa no navegador, caso ele tenha algum problema ele pode aumentar a fonte do navegador e terá um bom resultado em seu blog/site.
Alguns exemplos de tamanho de fonte baseado(apoiado ou referente) em outro valor, da body, de uma div ou elemento que está "por fora".
font-size: 0.5em; ou font-size: 50%;
é metade da fonte "do elemento externo"
font-size: 0.7em; ou font-size: 70%;
é 70% da fonte
font-size: 1.2em; ou font-size: 120%;
é 120% da fonte
font-size: 1.6em; ou font-size: 160%;
é 160% da fonte
font-size: 2em; ou font-size: 200%;
é 200% da fonte ou dobroExemplo de código com font-size no CSS
<HTML>
<HEAD>
<style type="text/css"><!--
body {font-size:small}
#outer-wrapper {font-size:90%;}
.sidebar {font-size:60%;}
--></style>
</HEAD>
<BODY>
<div id="outer-wrapper"> essa outer-wrapper vai ter fonte 90% de small
<div id="sidebar"> essa sidebar vai ter 60% da fonte de outer-warapper</div>
</div>
</BODY>
</HTML>
Esse código pode salvar como explo.html e ver. No exemplo acima a div sidebar está dentro de uma div com 90% do tamanho da fonte da body, ela terá 60% da div que está "por fora dela" e não da body.Se você quiser entender melhor, copie o código acima e salve como explo.html em seu Pc e teste ele mudando o tamanho das fontes de seu navegador, e até mesmo do arquivo.
Agrupar propriedades de fontes
Acima estão as 5 propriedades mais interessante de fontes e elas podem ser agrupadas, para reduzir código na página, os dois códigos abaixo resultarão no mesmo estilo.h3 {font-variant:small-caps;
font-weight:bold;
font-size:2em;
font-family:arial, verdana, sans-serif;
}
Substituindo por estilos agrupados:h3 {font: small-caps bold 2em arial, verdana, sans-serif;
}
É menos código, mas nesse caso deve seguir essa ordem abaixo:
font: style | variant | weight | size | family
Observe que no código acima deixei sem style para a font, você não precisa usar todos os estilos, só que bold e smal-caps exigem um tamanho para a fonte quando estão agrupados, pode ser 100% para deixar igual.
Bold e o small- caps não funcionaria nesse código:li {font: small-caps bold arial, verdana, sans-serif;
}
Nesse formato com estilos agrupados precisa Size para font variant e weightCor da fonte em Css
A cor da fonte no Css é apenas um código que não diz o nome font, e não pode ser agrupado como os outros, exemplo:
color:red;Onde, red é a cor da fonte, poderia ser um código hexadecimal como esse #ffffff que significa branco e ficaria assim: color:#ffffff;
Exemplo de Css que "manda" o parágrafo ter fonte preta:p {color:#000000;}
O código hexa vem seguido de um caracter(#), enquanto a cor escrita em inglês fica desacompanhada.
Existe RGB só que esse post já cansou um pouco.Como mudar a fonte no Css do BlogSpot
Vou mostrar onde mudar algumas fontes do blogSpot, porém você deve dar uma olhada se não tem essa função no blogger, se não souber, veja esse post: Fontes e cores.
Antes de começar uma alteração no seu Html, faça um backup do seu layout, uma cópia de segurança e, prefira copiar seu Html para um blog de teste.
Não tem como mostrar exatamente como você fará isso, cada layout é um pouco diferente, mas os locais no Css onde faz as mudanças de estilo geralmente é o mesmo, use Ctrl +F para localizar o código.
Todos os caracteres devem ser respeitados( ' : ; ."{} etc) Observe bem os códigos, cada propriedade(qualidade) geralmente termina com ponto e virgula; Se você encontrar um nome com um caracter parecido com isso $mainTextColor significa que essa propriedade pode ser mudada em fontes e cores no blogger.
Vou começar com o exemplo de parte do Css de uma lateral do layout de um BlogSpot chama-se sidebar e entre chaves está as {propriedades, qualidades para ela}.
Observe que, se tivesse um código pra font começando com esse caracter $ isso indicaria que é possível mudar em cores e fontes(veja como), sem precisar mexer em código(Expl: font: $sidebarTextColor;) Não copie esses códigos, olhe e entenda como você deve mudar seu Css.Exemplo Lateral do BlogSpot:
.sidebar {
width: 226px;
float: right;
color: green;
}
Vamos supor que eu fiquei maluco e resolva colocar uma fonte Small-Caps e de cor vermelha, adiciono o que não havia e substituo a cor da fonte assim:.sidebar {font-variant:small-caps;
width: 226px;
float: right;
color: red;
}
Observem a diferença entre antes e depois nos dois códigos acima, você deve primeiro ver se já existe um código para modificar e em ultimo caso adicionar.Vou mostrar a area central do BlogSpot onde vai os posts:
#main { Aqui você pode colocar ou
mudar uma propriedade}
Maujor.com tutorial
muito mal feito esse tutorial.
ResponderExcluirnão entendi, eu queri mudar os títulos do meu blog, queria só trocar a fonte, a fonte que eu queria é a Julies, mas eu não acho aqui, to quebrando a cabeça pra achar aonde fica mas não consigo é muiiito complicado, boom se pudeer me ajuda :/ obrigada desde já!
ResponderExcluirThaiany.
ResponderExcluirComo você usa o blogger, pode tentar usar a opção fontes e cores(veja aqui) Talvez tem a opção de escolha de um tipo de fonte.
Mas você deve perceber que algumas coisas exigem muito esforço, e, outras podem ser impossíveis, um exemplo disso é você querer que as pessoas vejam seu blog com uma fonte que não existe no computador delas.
Entenda que ninguém coloca fonte no blog/site, mas sim, especifica as fontes que o computador do visitante de seu blog deve usar quando "mostrar seu blog" naquele computador. Se as fontes que você especificar em seu blog não estiver instalada no computador do visitante, então, será usada outra fonte que estiver instalada no computador e gravada na configuração do navegador dele.
Geralmente os layouts já usam tipos de fontes que combinam e são bastante usadas em computadores, o que sugeri acima, a opção fontes e cores do blogger é bastante aconselhável para personalizar o BlogSpot, principalmente para quem não gosta de códigos, porém, você pode tentar ver como mudar o título da postagem com Css ou pesquisar título com Css, mas, esteja preparada para quebrar a cabeça. Como disse, sem esforço...
Antes de criticar, acho que a pessoa tem que fazer melhor. Gostei muito do tutorial, esclareceu várias dúvidas. Parabéns!
ResponderExcluirMUITO OBRIGADA PELO POST !!!
ResponderExcluirEra EXATAMENTE O QUE EU PRECISAVA =D
Parabéns pelo blog e principalmente pela boa vontade em explicar direitinho, tornando fácil o dificil, heheh;D
Abs !!!
Orra cara vlw pela post me ajudou p caramba
ResponderExcluirVlw
quero saber como eu colocar a data mais para a direita .. responde aquii
ResponderExcluirdudamathuz.blogspot.com por favor :)