Eu sempre fico na dúvida em relação ao tamanho.
Se pegarmos uma fonte de 400px, mas no CSS colocarmos font-size: 36px, o que isso iria impactar?
E se for ao contraria, pegarmos uma fonte menor e dermos mais px do que ela tem?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Eu sempre fico na dúvida em relação ao tamanho.
Se pegarmos uma fonte de 400px, mas no CSS colocarmos font-size: 36px, o que isso iria impactar?
E se for ao contraria, pegarmos uma fonte menor e dermos mais px do que ela tem?
Oi, Igor! Como vai?
No CSS, a propriedade font-size define o tamanho que o texto vai aparecer na tela, independentemente do tamanho original da fonte que você importou.
Assim:
p {
font-family: 'Arial';
font-size: 36px; /* tamanho final exibido */
}
Se a fonte foi desenhada, por exemplo, para ter 400px no arquivo original, mas você define font-size: 36px, o navegador vai reduzir proporcionalmente para caber nesse tamanho.
Já se a fonte for menor no desenho original e você colocar um valor maior, como font-size: 100px, ela será ampliada, mas pode perder qualidade se não for uma fonte vetorial (a maioria das fontes modernas é vetorial, então não há perda visível).
Então:
Muito obrigado pela explicação, não sabia disso e nem que existia fontes vetoriais.