Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Fonte dos elementos "Saudação"

Olá pessoal tudo bem? ao tentar fazer esse exercício quase consegui chegar ao resultado esperado, mas estava com algumas dificuldades principalmente na parte de "saudação" e fiquei um bom tempo quebrando a cabeça nessa questão, tentei de tudo pra fonte ficar igual e não conseguia usando a propriedade do CSS font-family.

Para minha surpresa após ver a resposta, no CSS, nenhuma propriedade de fonte foi utilizada em saudações!! foi usada apenas propriedades pra definir o tamanho e cor.

Como pode o texto ter ficado tão diferente no resultado final? até tentei ver o arquivo site.css e lá as fontes são definidas apenas no h1, h2 e body. Por favor, respondam esse grande mistério kkkkkkk

9 respostas

Olá Marcos,

Verifique no index.css

Lá devem constar as configurações conforme abaixo:

.saudacao p {
    font-size: 1.5em;
    color: #99A;
    line-height: 1;
    padding: 2em;
}

.saudacao-inicio {
    font-size: 3em;
    color: #889;
}

.saudacao-ultima-linha {
    text-align: right;
    display: block;
}

.saudacao strong {
    font-size: 2em;
    color: #000;
}

.saudacao em {
    color: #851944;
    font-size: 4em;
}

Sim Harley, eu vi essas informações.

A minha dúvida é como no resultado final as fontes ficaram tão diferentes se nesse CSS de resposta, não tem nenhuma propriedade definindo o ESTILO DA FONTE

No resultado final as fontes são bem diferentes do OLÁ e o SITES MARAVILHOSOS

Marcos, no "Olá" a classe .saudacao-inicio tem sim propriedades que definem o estilo da fonte {font-size: 3em; color: #889;}

Já no "João da Silva" e no "sites maravilhosos", o professor usou um seletor mais específico. Repare que o "João da Silva" está dentro de uma tag <strong> e o "sites maravilhosos" está dentro de uma tag <em>. No index.css você tem os seguintes blocos:

.saudacao strong {
    font-size: 2em;
    color: #000;
}
.saudacao em {
    color: #851944;
    font-size: 4em;
}

No HTML, tanto o <strong> quanto o <em> estão dentro de <p class="saudacao">.

Resumindo: O que esses 2 blocos acima querem dizer é o seguinte:

  • Aplique font-size:2em; e color:#000; em toda tag <strong> que estiver dentro do <p class="saudacao">

  • Aplique font-size:4em; e color:#851944; em toda tag <em> que estiver dentro do <p class="saudacao">

Agora mais um detalhe é que o <em>está itálico e não vemos a propriedade font-style: italic; no seletor dele. Isso está acontecendo porque no arquivo site.css, o professor definiu globalmente que a tag <em> tem font-style: italic;, veja na linha 82 desse arquivo.

Espero que ajude. Qualquer coisa só falar.

Olá Thiago Vilaça tudo bem?

Obrigado por sua atenção de ter respondido minha pergunta, talvez tenha me expressado errado, as propriedades que você citou define sim estilo da fonte.

Mas a minha dúvida na verdade não é em relação a tamanho, cor ou se ela está em negrito ou itálico, e sim de parecer que é de uma OUTRA FAMÍLIA DE FONTES

Exemplo:

Entre o "Olá" e o "Sites Maravilhosos" tem muitas diferenças visuais, o Olá é serifado e o Sites Maravilhosos não, a fonte dos Sites Maravilhosos tem muitas diferenças marcantes e não parece a mesma "fonte" só que em itálico ou negrito entende?

Ainda pra ajudar no arquivo index.html também tem uma fonte diferente no head, em link rel que não tinha nos arquivos anteriores:

Isso aumentou ainda mais o mistério pra mim rssssss,

Marcos, será que não é uma pequena confusão visual sua? Todas as palavras da mensagem "Olá, meu nome é João da Silva e eu construo sites maravilhosos" devem ter exatamente a mesma fonte, com variações somente entre tamanho/cor/italico/bold.

Se você tiver usando Google Chorme, dá um inspect nas palavras e abra a aba Computed no inspector, todas as palavras devem estar com font-family:"Crimson Text", "Times New Roman", serif; que é serifada.

Então Thiago Vilaça, do "Olá meu nome é João da Silva e eu construo " dá pra ver que é da mesma fonte, mas o SITES MARAVILHOSOS me passa a impressão que é outra fonte.

Eu já tentei inspecionar também com o chrome e ir no código site.css onde tem tudo. mas eu ainda acho que a fonte é diferente, pelo menos de "Sites Maravilhosos"

solução!

Essa fonte tem mesmo uma boa mudança no itálico, principalmente a letra a . Quer ver só, testa ela aqui no Google Fonts: https://fonts.google.com/specimen/Crimson+Text

Escreve o sites maravilhosos no preview e veja.

SANTO DEUS!!!

Não é que você tem razão mesmo, a fonte Crimson Text em ítalico ficou IGUALZINHA a que foi utilizada no exercício. É tudo a mesma fonte mesmo, pior que a confusão visual veio mesmo.

Obrigado Thiago Vilaça por solucionar esse mistério, um abraço! :D

Que isso :) abraço Marcos