Capturando as fontes usadas em um site - @Curso em Vídeo HTML5 e CSS3

nós estamos ainda nos nossos estudos do Capítulo 14 e agora eu vou te mostrar como capturar uma fonte de um site que você esteja visitando [Música] [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui do Capítulo 14 do seu curso de HTML e CSS estamos continuando a falar sobre onde a gente acabou de ultrapassar o número de vídeo falando sobre cores porque tem bastante coisa para falar sobre fonte e eu não cheguei nem na metade do que eu tenho que falar mas a gente vai dividir em partes aqui sempre para poder manter o melhor conteúdo para você e como eu disse no início desse vídeo e no final do vídeo anterior Às vezes você está visitando um site você faz Nossa essa fonte aqui é perfeita para mim como a gente seja copiando você só tá se inspirando então se esse texto estiver de forma textual que o esquisito essa frase né porque às vezes tem um texto Dentro de uma imagem aí não dá esse plugin não vai servir para isso mas eu vou te mostrar uma extensão muito legal do Google Chrome que vai permitir que você capture a fonte que está sendo usada no site ela disse captura todas as pontes estão sendo utilizadas numa determinada a página que está sendo exibida vamos nessa vamos descobrir qual por mim então vem comigo e o recado dessa vez é mais uma vez da nossa querida patrocinadora Rust né bom e o que eu vim falar que hoje é um recado muito especial para você que já tá querendo Criar o seu próprio site já um tempão provavelmente pode estar fazendo esse curso na intenção de criar seu próprio site mas tá vendo que aprender a traçar isso é uma coisa da noite para o dia que realmente não é mas saiba que se você tiver precisando de ajuda na construção do seu site você quiser deixar ele nas mãos de profissionais gabaritados a hostnet pode criar esse site para você isso porque ela é uma empresa especializada em hospedagem de sites e também das Ferramentas WordPress WordPress com o come-se e o onde parece que o Nordeste não sei se você sabe hoje parece que é para criar sites o comece para criar lojas e o Nordeste para a criação de plataformas educacionais online E além disso também é especializada no uma ferramenta de automação de marketing que é o mal Tic e se você tiver precisando de qualquer um desses serviços é só entrar em contato com a Rosinete ó nesse link aqui você pode também entrar em contato tem uma área ali para você e com um dos nossos representantes e eles vão te dar um orçamento para transformar esse seu sonho em realidade tudo por um preço justo feito profissionalmente Obrigado Rosinete pelo apoio e guarde na sua mente essa possibilidade essa oportunidade carros nessa trazendo para você e vamos voltar para aula então é só estou aqui com Chrome aberto vamos imaginar o seguinte você entrou aqui no site da variar outlet. com. br e esse é o olhou e falou assim Nossa essa fonte aqui tá legal eu gostaria de aprender como usar essa fonte aqui que fonte foi essa que eu gostei dessa aqui um pouquinho mais gordinho Eu gostei dessa tem um pouco mais magrinha que mas que fonte foi utilizada por te mostrar aqui já já você vai abrir aqui mas no Google e vai digitar Chrome Web Store a gente já digitou isso daqui ó como é só você vai para Chrome e.

Google. com/Web Store ataque só esse site não basta extensões fora daqui e você vai procurar uma extenção aqui ó Fontes Ninja ele tem várias e já a que eu gosto mais essa daqui para verdade o Fontes Ninja ele é um serviço que você assina e tem acesso a muitas Fontes Só que eu não quero assinar esse serviço eu quero só usar ele para identificar as fontes que estão sendo utilizadas em um determinado site você vai ficar aqui ó em usar no Chrome e aqui ele vai te perguntar você quer adicionar extensão ou não quero adicionar agora aqui do lado vai ficar já adicionou ele tá perguntando para sincronizar com todos os contadores eu não quero nada disso e agora a gente tem as nossas três extensões que a gente tá usando até o momento a gente tem o primeiro foi instalado pela web developer que é para ligar e desligar CSS JavaScript essas coisas ou colorzilla que a gente viu no capítulo anterior e agora o Fontes Ninja essas extensões aqui que são extremamente úteis e você só precisa usá-las quando você não sei nem deixar elas ativas aqui o seu só quando você tiver estudando para desligar uma extenção já te expliquei Ó você clica aqui nesses três pontinhos vem aqui em mais ferramentas e clique em extensões aqui você pode desligar tudo eu vou desligar o colo Zilu vou desligar o Font in já vou desligar os grandes não está ativo Aqui não está sendo utilizado na hora de estudar você vem aqui liga essas extensões e usa a vontade Valeu vou voltar aqui para o meu site da Rosinete e agora é só clicar nesse Nenzinho verde que tá aqui ó quando você clica ele já vai começar a analisar tua página e vai descobrir quais são as fontes e são utilizadas nela que eu vou clicar em next Ele tá dizendo aqui que você pode botar esse traz: Olha o que significa que você vai assinar o serviço deles na verdade deixa você testar Mas relaxa não vai precisa disso start basicamente esse site toda essa página toda está usando somente uma fonte não agora eu tô vendo aqui é bem diferente é a mesma fonte em tamanhos em pesos diferentes Então na verdade essa página toda que tá bem bonito inclusive ela tá utilizando uma família somente uma família de fontes e vai lá na mas essa fonte aqui do da palavra lanchar isso aqui não é uma fonte na verdade é uma fonte mas aqui tá dando de uma imagem aí esse plugin não consegue identificar outra coisa legal só passar o mouse por cima se você pega a características em qual o tamanho da fonte que tá aqui se ela está em se ela tá em Itálico se ela tá em sublinhado Qual é a cor da palavra que você tá passando mal já apresentou ter hospedagem de site está azulzinho tá vendo na verdade enquanto esse plugin tá ativo esses links já não funciona essa aqui na link tá você vai clicando ele vai dizendo aqui ó a cor da fonte aí mas eu quero esse azul também da hora só você clicar aqui ó copiou agora você já tem esse código de fonte só dá contra o ver que ele já pegou para isso é sensacional se quiser aqui essa corrida não vai usar ou fonte de mim já né você vai utilizar o colorzilla Mas enfim tá aqui ó a 4990 qual o tamanho dessa fonte 116 pixels tá com 78 de espaçamento vertical e zero Pixel gente passar antes lateral que é experimentar vou botar aqui ó 4990 49 se você quiser experimentar aumentar diminuir a fonte se você quer lá Light regular ou disse essa família permitir né é que trabalhou hoje entendeu Mas é um tô aqui Vou acessar o curso em video. Com barra urso WB que é o nosso curso de WordPress manual e foi um site que a E aí no curso de WordPress Eu recomendo que você faça também então tá carregando aqui e sou o site que a gente criou lá no nosso curso de um Ele parece Se você quiser Ah mas eu quero descobrir qual é a fonte que é usada publicou aqui no Ninja Zinho ele vai carregar esperar alguns segundos ele vai já buscar foi a berkshire swash a Joseph Infante que foram as fontes que realmente a gente usou quero saber a que fonte é essa é o banco berkshire swash essa daqui Joseline Santos enfim você consegue pegar isso tudo Inclusive a curar eu quero saber desse Dourado aqui ó foi as código aqui ó você 66 300 na verdade 16 6300 né clicou aqui ele Já copiou você não precisa nem ficar treinando nada voltar aqui teste tá não consegue fazer teste passamento entre caracteres aumentar diminuir enfim você consegue fazer várias coisas com esses ó tá aqui se você clicar em tentar experimentar essa fonte o seu computador você tem que ter o serviço assim mas essa extenção já fez o trabalho dela já fez o serviço dela Se você quiser você pode até ter a baixar Slash vou copiar essa Fechar isso aqui pegar aqui o nome da fonte contra você se você quiser você vai lá no da fonte dafont.

com que a gente já viu Vê se tem lá pode ser que não tenha boa vou colar aqui ó deve estar Sua Pesquisa ela não tem 10 fonte vou lá no Google Font Font. Google.