Detectando fontes dentro de imagens - @Curso em Vídeo HTML5 e CSS3

Olá no vídeo anterior a gente aprendeu Como identificar uma fonte dentro de um texto de um site agora eu vou te mostrar como identificar fonte de dentro de imagem E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui do seu curso de html com CSS eu sei que ele vídeo anterior eu prometi falar sobre alinhamento a gente vai falar isso no próximo vídeo porque tem entre uma aula e outra né Depois que a gente gravou essa hora de alinhamento Surgiu uma dúvida na minha cabeça falou assim

que esse outro Estiver dentro de uma imagem né porque no vídeo anterior eu não sei nem como detectar uma fonte de um site né mas essa fonte tem que estar em formato de texto e no vídeo eu passei alta tem que tomar cuidado porque dentro de imagem não dá para detectar da assim eu vou te mostrar como e três sites diferentes porque os resultados não são 100 porcento preciso é bom que você saiba disso ah mas eu tentei com a minha imagem ou funcionou paciência talvez não funcione com o Fontes Ninja sempre vai funcionar porque

já tá em formato de texto você já tá dentro do HTML dentro da CSS fica mais fácil agora dentro de imagem você precisa um pouco de visão computacional que nos algoritmos bem legais que eu vou te mostrar aqui ó e eu venho falando aqui no curso de html CSS várias vezes sobretudo na alta isso aqui é mais um recado na plataforma se você tá fazendo o nosso curso aqui de desenvolvimento de site e se interessou pela coisa de servidores se interessou pela parte física né você tem até os cursos básicos aqui no curso em vídeo

mas para aprender isso tudo de verdade com termos mais técnicos mais aprofundados academicamente organizados aí é só lá no estudonalta mesmo inclusive o nosso curso de redes nossos módulos de redes são criados exclusivamente pelo Alfredo que é o nosso professor aqui do curso em Harvard e do curso de redes e mostram muito mais do que o nosso curso aqui bem básico bem Inicial mostrou a mesma coisa não curso de Linux ele foi totalmente criado pelo professor Ricardo ele mostra desde o básico até o mais avançado de um servidor Linux na verdade um servidor local né

Da sua rede local mas já é um bom start para você conseguir aprender a criar servidores Linux mas também lançamos no estudonalta um curso de eletrônica básica o Eduardo mas não é um curso para especialistas em eletrônica não foi um curso totalmente modelado e pensado para quem é a profissional de informática de ti mas tem que começar aprender a mexer com motores tem que entender um pouquinho mais sobre elétrica eletricidade e tudo tá sendo explicado de uma maneira muito simples e bem objetiva tudo isso já está disponibilizado no estudo em alta e você pode ser

um assinante com uma assinante acessando esse link que está aparecendo aqui na tela Então é isso vamos seguir com o nosso curso mas considere também se tornar um aluno ou uma aluna do Studio Now Então é só agora a gente vai fazer nenhum exercício prático né de código eu vou simplesmente Abrir o Google Chrome e eu vou acessar três sites o primeiro site é o whats fontes.com what-font-is a e sai daqui já gente vai aprender a usar o próximo site é o sons cruel é fonte esquilo né ponto com e eu tô site e por

fim a gente vai abrir aqui mais uma aba e abrir o site iphones.com hoje ensinar como usar esses três sites para você conseguir detectar fonte certo vou começar aqui com uns Antes de a gente conseguir identificar com a gente precisa de uma imagem eu fiz uma bucha aqui na internet e achei essa imagem aqui porque essa imagem ficasse um monte de fonte até ela tá utilizando aqui é esse fonte aqui ó fracos o segredo do picadeiro é uma outra fonte aqui a próxima é uma outra fonte e eu fiz uns testes ele conseguiu identificar algumas

muito bem e outras nem tanto Então essa imagem que a gente vai trabalhar ele vai fazer eu salvei imagem aqui e vamos começar com um Fire só você arrastar esta imagem para essa área aqui esse aqui foi o que eu descobri que têm maior inteligência tá eu abri aqui pode cancelar se aquela que tem algum problema se aparecer essa tela pode cancelar é basicamente ele vai carregar a imagem para mim tem que esperar um pouquinho e ele é um pouco lento mas ele é bem funcional das três eu gostei mais dessa solução por isso que

eu tô mostrando ela antes de todas então né só que ele fez ele já pegou aqui a imagem e já detectou que aqui é texto que aqui é texto aqui também tá ele conseguiu identificar se você quiser você pode até mudar aqui ah não texto é um pouco menor um texto um pouco maior você consegue arrastar cada uma delas outra coisa importante e não consegue detectar todas as fontes como fonte já tá fazendo com sites você tem que explicar fonte fonte vou começar com essa círculos aqui essa círculos Foi a que eu obtive o melhor

resultado os melhores resultados essa fonte é facilmente detectada Então vamos lá e já fiz aqui já selecionei aqui os fracos clica aqui embaixo next step o próximo passo eu vou configurar o contraste eo brilho homem que aparece bem bom isso daqui inclusive de tirar fundo e tal mas você pode modificar aqui ó contraste o ato o teu objetivo aqui vai vai ser criar um contraste forte entre essas letras né novo vou E aí tá bem bom seu aumentar o brilho tá vendo o contraste entre as letras as outras não tão facilmente identificáveis seu objetivo é

deixar elas bem identificar as mas tá vendo aqui ó ele já colocou um pouquinho do fundo aqui eu não quero você vai organizar aqui para que ele tenha o melhor brilho contraste para que apareça um somente as letras aqui outra coisa que você pode fazer é inverter as cores também dá a outra coisa tentar fazer as unhas ficarem mais finas para ver se identifica melhor perto porque o meu caso não não fez aqui tem um redutor de ruído né não deu uma reduzida razoável que teve uma redução legal e outra coisa legal seguinte se uma

fonte estiver grudando na outra por exemplo é então grudando aqui tá vendo aqui embaixo eu consigo traçar uma linha aqui ó para separar ó aqui é uma letra aqui a outra letra consegue fazer isso em todas as letras tá é bem legal aqui é o Seco eo Tom Bem grudados também enfim você vai separando as letras aqui uma vez que você faz isso aqui quanto mais cuidado você tiver nesse momento melhor para ele e clique em next step E aí ele vai botar aqui para mim ó digita aqui que letras são essas aqui para poder

identificar melhor Olha isso aqui é um ser às vezes ele não identifica tudo não Pode fechar essa janelinha isso aqui é um II e são r maiúsculo e são ser maiúsculo se é um uma eu inscrição S maiúsculo isso aqui não é nada quando não é nada você deixa vazio tá se você não conseguir identificar e letra essa os por mais de uma letras vezes acontece não escreve clique em next step de novo e aí aqui ó ele já me identificou Quais são as fontes ó essa fonte que é exatamente essa fonte inclusive ela é

comercial ela é paga tá vendo aqui ela tem outras versões aqui que se parecem com essa daqui já é gratuita para uso pessoal essa daqui não se parece tanto e é free também ok se você quiser seu cliente que é exatamente essa fonte de Cara essa aqui é exatamente a fonte é só de comprar alta que Ingrid Marques Olha isso é exatamente a mesma fonte e que no caso ela custa quatorze reais que se for como a web fonte também r$ 14 não $14 perdão Então beleza só que deixa eu fazer o processo de novo

aqui ele não foi nos meus testes aqui tão feliz em identificar outras letras como por exemplo a outras fontes no caso para estar aqui de novo a imagem que fazer o mesmo processo aí ó Vou tentar pegar essa aqui ó picadeiro essa palavra que brincadeira identificar ela tentará identificar que fonte é essa ele não conseguiu achar aqui pelo menos nos das minhas experiências essa fonte aqui ele não conseguiu identificar vou tentar fazer o meu melhor aqui identifiquei beleza aqui a começa a ficar comprimindo atrás né com cores ou não quero show um homem não retribuído

nós aqui não ficou tão legal é o separar as letras aqui bonitinho essa essa separação ela é muito mais útil para caso de fontes escripta da está para você aquelas Fontes Hendrix em que a gente viu durante as aulas o s é com ele aqui com certeza ele teria algum problema e tenha paciência porque aí você consegue uma identificação melhor next step a isso aqui ele não consegui identificar não é letra nenhuma vou pular essa que é um P isso é tinha é um minúsculo é um ser é um lá é um bebê é um

é é um ir na verdade e tudo mais lógico né mas enfim é rica nada Quem pegou duas vezes não é que não é nada que não é nada é que é um enfim next vamos ver se ele consegue identificar olha agora ele pegou em também paga da outra vez que eu testei aqui ele não pegou a quer tá é o grande é exatamente essa fonte que esta o Chrome volto a dizer foi onde eu tive os melhores resultados vou clicar aqui nessa pontinha quanto ela custa mesmo site provavelmente alguma parceria que eles têm para

uso em desktop Pub d9ea $90 depende aí do que você precise Beleza pensei que foi o primeiro what-font-is foi que eu mais gostei também existe o fundo escolheu e mostra mais rápido é só você pode escolher na verdade é um site de fontes mesmo mas você pode clicar aqui ó em Font identifier também pode arrastar a imagem para cá arrastando ele também vai selecionar que vai pedir para você selecionar só vou tentar aqui os trolls que na verdade além da fonte bem popular é uma fonte que foi usada bem grande tá vendo ele conseguiu identificar

as letras aqui aí separações e o outro eu tive que fazer manualmente Você vai clicar aqui em maquiar aqui tá lá ele Já identificou tá aqui ó mas não é exatamente a mesma fonte como o outro já tinha identificado tá vendo esse daqui você parece bastante mas teve algum problema aqui na identificação de alguns grifos tá vendo Então esse aqui não funciona tão bem quanto o Whats e o último que eu for mais Fontes aqui você também tem what's the Font você pode clicar quem gosta de fontes e fazer um processo semelhante todos os sofre

se parecem né mas são só tô diferente O que que você tá demonstrando três se o primeiro é bom porque às vezes você está tentando identificar uma fonte e um e identifica mas o outro identifica Vamos tentar fazer aqui ó aquele pegou a estrelinha você percebe que ele nunca pega todas as fontes nenhuma das soluções eu vou lá e vou dizendo qual que eu quero aquele identificou várias outras tá vendo posso clicar aqui mas vou usar essa daqui de novo cliquei Olhe também pegou algumas Fontes que no caso você quer gratuita não 29 tá vendo

É tudo pago que eu ver se tem alguma nenhuma daqui tá vendo Então é isso daí Isso é para você ter uma ideia de como selecionar Fontes eu vou te dar dica em primeiro lugar o as fontes que foi o primeiro que eu te mostrei depois caso a tua fonte não tenha sido identificada 70 aí o pontos crow e o mais fones.com Fechou então agora já te mostrei como usar fontes como detectar Fontes no site utilizando Fontes Ninja se eu tiver em forma de texto Mas você tá com uma imagem receber uma propaganda falou Nossa

essa fonte é legal Pai tenta se você conseguir identificar como dessas três soluções que eu te mostrei agora beleza com certeza Existem várias maneiras de você apoiar o canal do curso em vídeo mais uma das mais importantes é entrando no site do curso em vídeo que esse aqui que tá aparecendo aqui do lado e clicando na parte de cima do link seja um apoiador você ajuda muito projeto a se manter gratuito e como recompensa a gente oferece alguns vídeos exclusivos alguns vídeos de backstage algumas coisas exclusivos como um curso básico de programação usando Portugal estúdio

algumas aulas adiantadas do curso de html que você tá vendo aqui e de quebra muito em breve também vamos oferecer certificados para quem é apoiador então não perca tempo se você pode ajudar a gente acesso a curso em video. Com e clica no link que está na parte superior do site Seja um apoiador Então é isso eu encerro por aqui e agora no próximo vídeo a gente vai falar sobre alinhamento de texto final em um grande abraço e até já já E aí E aí E aí