Sou a Helen Fernanda e aqui compartilho dicas, resenhas e tutoriais sobre perfumes, Android, streaming, TV, séries, livros, idiomas e outros recursos que nos libertam do tédio.
Não são poucos os blogueiros que se assustam quando olham as fontes do próprio blog pela primeira vez em um outro navegador ou em outro sistema operacional. Isso ocorre simplesmente porque as fontes instaladas nos mais diversos sistemas operacionais não são as mesmas.
Como usuária de Windows XP e Ubuntu 9, vou listar o que considero como possíveis soluções para que blogueiros que usam Windows consigam definir suas fontes corretamente de forma que usuários Linux não sejam prejudicados.
Este post foi atualizado em agosto/2009.
As propriedades em CSS que modificam a fonte são:
Definimos o família de fonte com font-family:
| <div style="font-family: 'Lucida Bright', serif">Este texto vai aparecer com a fonte Lucida Bright se você tiver ela instalada. Caso contrário, ele será mostrado com a fonte serifa padrão de seu navegador.</div> | Este texto vai aparecer com a fonte Lucida Bright se você tiver ela instalada. Caso contrário, ele será mostrado com a fonte serifa padrão de seu navegador. |
Ao escolher a fonte, podemos definir a espécie (times new roman, verdana…) ou o gênero (serif, sans-serif) da fonte.
| Serif | |
|---|---|
| <div style="font-family:serif">Este texto vai aparecer com a fonte de serifa padrão de seu navegador.</div> | Este texto vai aparecer com a fonte de serifa padrão de seu navegador. |
| <div style="font-family:georgia, serif">Este texto vai aparecer com a fonte Georgia, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador.</div> | Este texto vai aparecer com a fonte Georgia, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador. |
| <div style="font-family:garamond, serif">Este texto vai aparecer com a fonte Garamond, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador.</div> | Este texto vai aparecer com a fonte Garamond, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador. |
| <div style="font-family:'Monotype Corsiva', serif">Este texto deve aparecer com a fonte Monotype Corsiva, mas se ela não existe em seu computador, aparecerá com a fonte serifa padrão do navegador.</div> | Este texto deve aparecer com a fonte Monotype Corsiva, mas se ela não existe em seu computador, aparecerá com a fonte serifa padrão do navegador. |
| Sans-serif | |
| <div style="font-family:sans-serif">Este texto vai aparecer com a fonte sem serifa padrão de seu navegador.</div> | Este texto vai aparecer com a fonte sem serifa padrão de seu navegador. |
| <div style="font-family:verdana, sans-serif">Este texto deve aparecer com a fonte Verdana, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador.</div> | Este texto deve aparecer com a fonte Verdana, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador. |
| <div style="font-family:trebuchet ms, sans-serif">Este texto deve aparecer com a fonte Trebuchet MS, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão da máquina.</div> | Este texto deve aparecer com a fonte Trebuchet MS, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão da máquina. |
| <div style="font-family:'Arial Rounded MT Bold', sans-serif">Este texto deve aparecer com a fonte Arial Rounded MT Bold, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador.</div> | Este texto deve aparecer com a fonte Arial Rounded MT Bold, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador. |
Monospace | |
| <div style="font-family:monospace">Este texto vai aparecer com a fonte monoespaçada padrão de seu navegador.</div> | Este texto vai aparecer com a fonte monoespaçada padrão de seu navegador. |
| <div style="font-family:'OCR A Std', monospace">Este texto deve aparecer com a fonte OCR A Std, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.</div> | Este texto deve aparecer com a fonte OCR A Std, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador. |
| <div style="font-family:'Lucida Console', monospace">Este texto deve aparecer com a fonte Lucida Console, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.</div> | Este texto deve aparecer com a fonte Lucida Console, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador. |
| <div style="font-family:courier new, monospace">Este texto deve aparecer com a fonte Courier New, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.</div> | Este texto deve aparecer com a fonte Courier New, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador. |
Cursive | |
<div style='font-family:cursive;'>Este texto deve aparecer com a fonte <b>cursiva</b> padrão do navegador.</div>
| Este texto deve aparecer com a fonte cursiva padrão do navegador. |
<div style="font-family:'Lucida Calligraphy', cursive;">Este texto deve aparecer com a fonte <b>Lucida Calligraphy</b> ou com a fonte cursiva padrão do navegador.</div>
| Este texto deve aparecer com a fonte Lucida Calligraphy ou com a fonte cursiva padrão do navegador padrão do navegador. |
Fantasy | |
<div style='font-family:fantasy;'>Este texto deve aparecer com a fonte <b>fantasy</b> padrão do navegador.</div>
| Este texto deve aparecer com a fonte fantasy padrão do navegador. |
<div style='font-family:Impact, fantasy;'>Este texto deve aparecer com a fonte <b>Impact</b> ou com a fonte <b>fantasy</b> padrão do navegador.</div>
| Este texto deve aparecer com a fonte Impact ou com a fonte fantasy padrão do navegador. |
Definimos o estilo da fonte com font-style:
| <div style='font-style:inherit;'>Com inherit o texto segue o estilo herdado da tag onde estiver inserido.</div> | Com inherit o texto segue o estilo herdado da tag onde estiver inserido. |
| <div style='font-style:normal;'>Com normal o texto segue a inclinação padrão do tipo.</div> | Com normal o texto segue a inclinação padrão do tipo. |
| <div style='font-style:italic;'>Com italic o texto fica inclinado para a direita.</div> | Com italic o texto fica inclinado para a direita. |
| <div style='font-style:oblique;'>Com oblique o texto fica inclinado para a direita.</div> | Com oblique o texto fica inclinado para a direita. |
Essa propriedade não causa qualquer alteração em fontes que não têm a opção de estilo itálico.
Definimos a variação da fonte com font-variant:
| <div style='font-variant:inherit;'>Com <strong>inherit </strong>a fonte terá a mesma <i>variant</i> que o elemento no qual a tag está inserida.</div> | Com inherit a fonte terá a mesma variant que o elemento no qual a tag está inserida. |
| <div style='font-variant:normal;'>Com <strong>normal</strong> a fonte fica assim.</div> | Com normal a fonte fica assim. |
| <div style="font-variant: small-caps;">Com <strong>small-caps</strong> a fonte fica assim.</div> | Com small-caps a fonte fica assim. |
Antes de tirar conclusões erradas, observe atentamente a diferença entre um texto com small-caps (maiúsculas menores) e um texto com uppercase (maiúsculas):
| <div style='font-variant:small-caps;'>Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes.</div> | Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes. |
| <div style='text-transform:uppercase;'>Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes.</div> | Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes. |
Definimos a espessura da fonte com font-weight:
| <div style="font-weight:inherit;">Com <em>inherit</em> o texto segue o padrão do elemento em que a tag está inserida.</div> | Com inherit o texto segue o padrão do elemento em que a tag está inserida. |
| <div style="font-weight:bolder;">Com <em>bolder</em> o texto fica em negrito.</div> | Com bolder o texto fica em negrito. |
| <div style="font-weight:bold;">Com <em>bold</em> o texto fica em negrito.</div> | Com bold o texto fica em negrito. |
| <div style='font-weight:normal;'>Com <em>normal</em> o texto fica com a espessura padrão.</div> | Com normal o texto fica com a espessura padrão. |
| <div style='font-weight:lighter;'>Com <em>lighter</em> o texto fica mais claro que o normal.</div> | Com lighter a fonte fica menos espessa que o normal. |
Além dos exemplos supracitados, esta propriedade também aceita valores numéricos de 100, 200, 300… até 900.
Definimos o tamanho da fonte com font-size:
| Valores absolutos | |
|---|---|
| <div style="font-size:xx-large">Com <em>xx-large</em> o texto fica muito maior.</div> | Com xx-large o texto fica muito maior. |
| <div style="font-size:x-large">Com <em>x-large</em> o texto fica maior.</div> | Com x-large o texto fica maior. |
| <div style="font-size:large">Com <em>large</em> o texto fica grande.</div> | Com large o texto fica grande. |
| <div style="font-size:medium">Com <em>medium</em> o texto fica mediano.</div> | Com medium o texto fica mediano. |
| <div style="font-size:small;">Com <em>small</em> o texto fica pequeno.</div> | Com small o texto fica pequeno. |
| <div style="font-size:x-small;">Com <em>x-small</em> o texto fica menor.</div> | Com x-small o texto fica menor. |
| <div style="font-size:xx-small;">Com <em>xx-small</em> o texto fica muito menor.</div> | Com xx-small o texto fica muito menor. |
| Valores relativos | |
| <div style="font-size:smaller;">Com <em>smaller</em> o texto fica menor do que estava antes.</div> | Com smaller o texto fica menor do que estava antes. |
| <div style="font-size: inherit">Com <em>inherit</em> o texto segue o tamanho padrão do elemento ao qual ele pertence.</div> | Com inherit o texto segue o tamanho padrão do elemento ao qual ele pertence. |
| <div style="font-size:larger">Com <em>larger</em> o texto fica maior do que estava antes.</div> | Com larger o texto fica maior do que estava antes. |
Esta propriedade também aceita valores numéricos em pixels (px), pontos (pt) e porcentagem (%).
Podemos definir todas as cinco características da fonte dentro da propriedade font:
| <div style="font:small-caps bold 13px 'comic sans ms';">Texto com várias propriedades em uma só.</div> | Texto com várias propriedades em uma só. |
| <div style="font:italic bolder 15px 'Lucida Bright';">Texto com várias propriedades em uma só.</div> | Texto com várias propriedades em uma só. |
A ordem dos valores na propriedade font é: font-style | font-variant | font-weight | font-size | font-family.
Nível: intermediário
Como muitos de vocês já devem ter lido no Dicas Blogger ou no Ferramentas Blog, o Blogger finalmente implementou nos Marcadores os recursos de:
Usando Wordpress MU, mesma plataforma da rede social Blog Católico, a rede social Gente de Fé é uma das mais novas iniciativas do portal Canção Nova.
Sua página na rede Gente de Fé terá o seguinte formato:
Apesar de ser a principal finalidade do Wordpress MU, o recurso de criação de blogs atualmente está inativo na rede.
Embora use a mesma interface, o site Gente de Fé tem novidades em relação à rede Blog Católico. A primeira é estar totalmente em português, a segunda é a integração com outros sites, como Twitter, Flickr e YouTube. Após uma simples configuração de usuário e senha, suas atualizações nesses sites aparecem automaticamente em seu perfil, como no aparecem no meu:
Paz e bem!
Comecei hoje a ler Cartas Entre Amigos e já quero citar dois parágrafos do Padre Fábio de Melo:
Escuto absurdos sobre Deus, quando pessoas movidas por boas intenções resolvem explicar as fatalidades do mundo. Frases simplórias e descomprometidas com a verdade não resolvem; ao contrário, agravam ainda mais o sofrimento, porque geram orfandade, descrença e abandono.
Justificam as tragédias humanas como “vontade divina”, retirando assim a responsabilidade humana dos acontecimentos, fruto das escolhas que fazemos. Respondem a tudo e a todos como se o desvelamento do mistério pudesse resolver as questões.
O trecho do livro serve apenas para embasar um desabafo que há muito tempo eu queria fazer, pois se trata de uma situação que muito me incomoda.
Nível: intermediário
Confesso que não tinha a intenção de fazer esse template, ele nasceu de uma tentativa “frustrada” de fazer um template para outro blog. Não serviu para o blog em questão porque já estava ficando cute demais.
Então resolvi terminá-lo mesmo assim para publicar aqui, mesmo não sendo uma tradição minha disponibilizar templates. Não sou propriamente uma designer, então desde já peço desculpas por qualquer coisa.
As demais imagens que estão zipadas são backups de outras imagens utilizadas no template. Você só vai precisar delas se alguma das atuais não abrir ou apresentar lentidão, portanto, guarde em local seguro.
1. Entre em Layout » Editar HTML.
2. Marque a opção Expandir modelos de widgets.
3. Procure pelo texto “Goiânia” para encontrar a seguinte linha de código:
4. Onde está escrito Goiânia, coloque o nome de sua cidade. Alguns exemplos:
Você também pode apagar o nome da cidade se não quiser mostrar nenhuma. Para isso, substitua o código supracitado por apenas:
5. Visualize e, se estiver conforme desejado, salve.
Anny, obrigada por me lembrar!
Até mais!
Para não dizer que meus parentes nunca me renderam nada*, vou escrever um post sobre eles e tentar faturar alguma coisa com os links patrocinados.
Seguem os passos para transformar a assinatura do autor do post em link.
1. No painel do Blogger, vá até a página Layout » Editar HTML e marque a opção Expandir modelos de widgets.
2. Procure pelo seguinte código:
3. Substitua pelo código seguinte, sendo que onde está escrito http://twitter.com/helenfernanda coloque a URL desejada:
Clique no botão Visualizar antes de Salvar modelo. Se o blog tiver vários autores, coloque o link para a página de equipe, já que, por esse método, independente de quem seja o autor, o link sempre será o mesmo.
Até mais!
Uma das grandes surpresas neste Top 10 é a presença do excelente Templates Novo Blogger que está com um link para cá na seção Recomendo. Amei! Como já contei aqui, os tutoriais muito bem explicadinhos da Ariane foram definitivos quando escolhi migrar para o novo Blogger, já que durante muitos meses eu resisti usando o template clássico.
Blogs que trouxeram mais visitas ao HTMHelen entre 10/07 e 09/08/2009:
Não gosto muito de me desculpar, mas acho melhor avisar que estou sem internet em casa. Garanto que em breve tudo será solucionado e os posts que estão nos rascunhos serão publicados.
Depois de muitos meses sem adoecer, “inventei” de pegar uma gripe justamente na semana do meu aniversário. A única coincidência boa é que os canais Tele Cine estavam todos com sinal aberto e assisti muitos filmes enquanto os olhos aguentavam, já que a fadiga visual foi o pior sintoma que tive desta vez.
Por causa desse mesmo problema não pude escrever muito nos últimos dias, nem para o blog, nem profissionalmente. Já estou melhorando e em breve estarei 100% para resolver meus problemas com a operadora de telefonia e voltar a blogar diariamente.
Até mais!
