Tamanho de fonte e suas medidas - @Curso em Vídeo HTML5 e CSS3
127.98k views2141 WordsCopy TextShare
Curso em Vídeo
Você sabe usar a propriedade font-size nas suas configurações CSS? Sabe qual é a diferença entre usa...
Video Transcript:
e vamos dar continuidade aos estudos do Capítulo 14 onde a gente tá falando sobre Fontes [Música] [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem-vindo a mais uma aula aqui do seu curso de html com CSS estamos falando sobre o conteúdo e sobre estilo Agora nós estamos falando mais sobre estilo nós estamos nos focando que nós poder estilo e nós estamos trabalhando a partir de fontes já falou sobre cores Agora estamos falando sobre fontes e nessa aula a gente vai falar sobre tamanhos e tamanhos é a tamanho uma coisa meio complicada de discutir com as pessoas então basicamente eu vou fazer seguir recomendações do w3c que é o que eu recomendo que você faça também mesmo que a recomendação de outras pessoas que seja a outra régua não trabalha com ponto trabalha com pizza recomendamos seguir o que a w3c que o órgão principal para fazer exatamente isso a gente vai fazer um falar um pouco sobre tamanhos de fontes a partir de agora vamos fazer mais uma pequena pausa aqui no nosso curso de html para a gente trazer mais um recado da Record para você e o mercado de hoje talvez não sirva exclusivamente para você porque provavelmente você já a tomada acostumada com tecnologia Mas saiba que na plataforma da Record existem cursos para quem tá começando o mesmo que talvez você tenha um parente um conhecido que não esteja tão interessado em desenvolvimento mas que precisa aprender os primeiros passos da tecnologia EA República tem alguns cursos muito importante para quem tá precisando daquela primeira mãozinha o que precisa de algum certificado e de algumas ferramentas bem simples os cursos que eu trouxe para falar sobre eles aqui são um desvendando o Windows que mostra os primeiros passos no sistema operacional o Word na prática onde eles ensinam a aplicar o editor de textos da Microsoft em situações do dia a dia e do mercado de trabalho no Excel na real que ensina a utilizar planilhas eletrônicas em coisas cotidianas em um PPT para apresentação e vai te ensinar como fazer e dar dicas como fazer apresentações utilizando o PowerPoint para fazer qualquer um desses cursos é só você apontar a câmera do seu celular por código que tá aparecendo aqui na tela e você vai ser enviado diretamente para uma página Alô especial do conferir uma explicação de cada uma dessas oportunidades Obrigado recolhido pelo Patrocínio e por oferecer tantos cursos interessantes para os nossos valores Então vamos lá esse aqui é o exercício que a gente criou na aula passada tá vou até tirar as configurações de alguém jogadores aqui a gente ficar só com as configurações do bar Então tá lá normal tamanho de fonte é o seguinte Existem várias formas da gente colocar um fonte faz tá é o Font size ele pode ser medido ó existem que a gente chama deixa eu colocar aqui algumas observações anota esse que nem no pdf eu coloquei a a gente tem as medidas absolutas e a gente tem as medidas relativas às medidas absolutas elas são os centímetro ou milímetro a polegada a nota que você quer polegada tá existe também o Pixel o ponto EA paica tá basicamente essa daqui são medidas absolutas um centímetro é um centímetro só que a gente tem um grande e na hora de representar isso as vezes o navegador não consegue chegar exatamente um centímetro porque existem telas de tamanhos diferentes a sua TV de 50 polegadas ela vai mostrar de um jeito o teu celular que aquela pequenininha a mostrar de outra o seu tablet Pode mostrar de outra então centímetros e milímetros são medidas absolutas o teu site vai tá montado com a medida né utilizada só que a apresentação pode ser diferente Terra temos que é importante até o Pixel porque tem dispositivos por exemplo telas de alta resolução podem utilizar pixels de 4 componentes a Apple tem um nome para essa tela já esqueci a retina as telas retina é um pixel não é um pixel é um quarto de pixel então fica complicado a gente trabalha também com isso. E pai cá são medidas da tipografia de papel então sem ponto e não se recomenda utilizar em material impresso em tela tá material que vai ser exibido em telas Então apesar de que eu sempre utilizei. Né erradamente assim e mais é são as medidas letras absolutas as medidas relativas também são várias a gente tem o m que a medida relativa ao tamanho atual da fonte a gente tem Oeste que é relativo à altura x de uma fonte para o Guanabara o quê que é a altura isso aqui é altura M esse aqui é outra x altura e me é relativo ao m maiúsculo de uma letra de uma determinada fonte oeste é o tamanho da altura x de uma fonte Me explica aí já te expliquei no primeiro vídeo dessa série no primeiro no segundo vídeo desse capítulo que eu falei sobre a outra x Então segue lá a gente tem RM que é tipo é m só que ao relativo ao root a fonte que está configurada no Bari a gente tem também o viu Winder quer dizer largura da viewport logo a viewport é o tamanho da sua então aquela pequenininha Desce aqui ela tem uma viewport ela tem um tamanho de tela uma tela de monitor monitor de um notebook tem outro bom então isso aqui é porcentagem da viewport da largura da viewport também eu posso usar o VH que é a altura da viewport eu posso trabalhar também com porcentagem existem outras medidas relativas Tá mas normalmente a gente vai utilizar basicamente o m eu vou te mostrar nessa aula como trabalhar com o m né que a altura do m maiúsculo que inclusive como eu falei ah vamos utilizar com a gente combinações da w3c para a medida de fonte para o Font size ele recomenda o uso do PX e o uso do M somente essas duas medidas aqui tá é exatamente acho que eu vou representar para você não use centímetro milímetro polegada.
Pai cá não use a altura do x altura relativa do m no root largura da proposta altura da viewport porcentagem não use a recomendação do www3 cena é usar Pixel e Nitrato vou te mostrar como trabalha com isso E se eu botar aqui font-size 1 cm nada e outra coisa eu não posso espaço tá entrar medida e o número é um centímetro você colocar aqui ó isso aqui tá com 1 cm certo e baseado na no tamanho do corpo da letra tamanho do corpo da fonte você não sabe o que que é corpo da fonte volta lá no segundo vídeo que eu falei da anatomia do tipo certa vendo como é que é importante a gente saber disso muitos alunos sempre entrar em contato comigo dizendo assim armas Guanabara às vezes sai um vídeo novo um curso novo não consegui vídeo eu não sou avisado pelo Youtube tem algum outro jeito de você me avisar pois agora tem é só você acessar t. me/consegui vídeo esse é o nosso link do canal mas não ao canal do YouTube é nosso canal no telegram Eu costumo sempre dizer o telegram tipo o WhatsApp só que muito bom é só você acessar esse link confirmar a inscrição no nosso canal isso é gratuito e você vai receber sempre notificações daquilo que a gente vai lançar essa é a maneira mais segura de se manter sempre atualizado o atualizada com as novidades do curso em vídeo Ah então beleza se eu vou dar uma polegada uma polegada uma polegada = 2,54 cm na medida aí então isso aqui tá com dois e 54 centímetros ou uma polegada que eu posso botar meia polegada também meia polegada 0. 5 polegadas aqui é a metade de uma polegada é importante dizer que não é 0,5 0,5 vai dar ruim tá ele simplesmente ignora então ele vai botar aqui 10.
1 polegada Vamos mas também não utilize a gente pode colocar em Pixel normalmente a gente pode representar que ele 16 pixels 16 pixels geralmente é o tamanho anormal da fonte tá 16 pixels normalmente o que eu não botar o Fontes agora eu vou tirar é o tamanho normal se eu colocar 16 pixels aqui você vai ver que vai mudar nada se eu botar 17 filhos seus você já vai ver que vai aumentar um pouquinho falando se eu vou estar 15 pixels você vai ver que diminui um pouquinho se eu ó ó você vai ter que ele vai aumentar um pouquinho aqui é exatamente o tamanho de 16 pixels normalmente os navegadores bota no Font size de 16 pixels e qual a diferença do Pixel por PT 16 PT 16 PT é a maior de onde vem esse IPTU o ponto como eu falei uma medida tipográfica Quando você vem aqui sei lá no Word Pad editor de texto aqui do Windows é tipo um ovo de genericão botar aqui Olá essa palavra lá aqui ela tá com o tamanho de 11 pontos essa medida que é pronto tá se eu botar 16 aqui exatamente o tamanho desse daqui então quando você vai lá no Word já eu quero uma fonte 20 para uma fonte esse aqui é 20 pontos certo no editor de texto Ok porque você vai imprimir a tendência imprimir não site a própria w3c niso a não usa nomenclatura de ponto tá usa o Pixel client já viu que o 16 pixels é o tamanho natural da fonte ou usa o e me o que que é o m esse aqui é o seguinte dizer certifique-se usar o tamanho P a 16 pixels Vou colocar aqui ó 16 pixels geralmente é igual a 1 m é m significa o seguinte que é o tamanho da letra normalmente Será que tamanho da letra 17 fixa 17 pessoas em 1 m perto a partir daí eu consigo por exemplo se eu botar aqui Fontes as 16 pixels ou 1 m 1 m não vai mudar tá vendo não mudou agora é só botar 2. am lá ele já vai aumentar porque que ele está aumentando Porque ele é o dobro do tamanho dos 16 pixels lembra que eu falei geralmente uma m-16 pixels 2 cm são 32 pixels então ele vai fazer exatamente o dobro se eu quiser eu posso colocar metade zero. 15 metade do tamanho normal da fonte se você quiser você pode botar 1.