rnxn 2 Postado 7 de Agosto 2014 Compartilhar Postado 7 de Agosto 2014 @FONT-FACE Segundo MAUJOR: "A diretiva @font-face das CSS3 (...) destina-se a especificar um tipo de fonte para uso em determinadas partes de uma página ou na página toda (ou no site todo) e ter a garantia que a fonte especificada será renderizada no navegador do usuário independentemente de ele ter ou não a fonte instalada em seu sistema operacional." - É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se . Antigamente, se você codificava um site usando uma fonte personalizada, para que o cliente a visualizasse ele teria que tê-la instalada no computador. Tendo por exemplo, no seu CSS: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se Aconteceria o seguinte: O usuário acessaria a página, o navegador tentaria renderizá-la usando a fonte "MinhaFonteMagica". Se o usuário não tivesse a fonte instalada no computador a página seria renderizada com a próxima (no caso "Comis Sans MS") e assim por diante. Um usuário de MAC, por exemplo, não veria a fonte "comic sans MS" e provavelmente veria a página diferente daquilo que você esperava. Com a chegada das CSS3 as coisas melhoraram e agora é possível usar qualquer fonte da seguinte forma: Ao acessar uma página onde a fonte foi definida usando font-face, se o cliente não tiver ela instalada o navegador fará o download da fonte e irá renderizar a página com ela. Atualmente, todos os navegadores (com exceção do Opera Mini) tem suporte ao uso dessa diretiva - É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se . Para definir uma fonte usando @font-face é simples: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se Exemplo: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se A única "desvantagem" é que qualquer um pode acessar a fonte, por isso em alguns casos você precisa PAGAR por uma licença. Recomendo ler o artigo do MAUJOR sobre os formatos de fonte e valores: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se . No tutorial a seguir, vamos baixar uma fonte (em formato de ícones) e aplicá-la em uma página. BAIXANDO A FONTE Existem vários sites na internet em que é possível procurar por fontes e realizar o download. Muitos deles possuem fontes gratuitas, onde qualquer pessoa pode usar. Um exemplo é a fonte usada pelo twitter (Font Awesome), todos aqueles ícones exibidos no twitter são fontes e podem estar na sua página/aplicação também. Um site que considero muito bom é o ICOMOON - É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se - devido a grande quantidade de fontes gratuitas e a variedade dos ícones. Outro ponto interessante é que o site gera um arquivo .ZIP/.RAR contendo o arquivo da fonte e o CSS já pronto, configurado para aplicar os ícones. Entre no link acima e escolha qualquer ícone de qualquer pacote de fontes, a quantidade que quiser e deseja usar no seu projeto. Feito isso, clique em "font" na parte inferior: Na sequência você pode escolher um nome para o ícone e um código para o mesmo (as duas informações já tem preenchidas, mas você pode alterar). Esse código será usado assim: Sempre que o código for encontrado ele será substituido pelo ícone, mais à frente veremos isso. Depois de preenchido, antes de clicar em download procure na parte superior da página por "preferences". Aqui podemos alterar o nome da fonte, não é algo muito relevante para nós. Os ícones gerados pelo site serão classes. Para distinguirmos o que é ícone dos demais podemos escolher algum prefixo para usar na classe. Por exemplo, ícones terão um prefixo "ico-", "icon-", "icone-", "meu-icone-fantastico-", etc. Assim, posteriormente podemos usá-los assim:ico-seta ico-curtir ico-youtube ... Também é possivel escolher se você quer dar suporte a navegadores IE antes da versão 7. Só para constar, eu nunca marco essa opção, o usuário que atualize o navegador que ele usa, navegadores antes do IE7 é fo** para dar suporte, basta procurar na internet os motivos... Pronto, basta fazer o download e extrair os arquivos. ESTUDANDO O ARQUIVO BAIXADO Depois de baixado, abra o arquivo "style.css" em um bloco de notas (ou IDE, Notepad++, etc). Teremos o seguinte: Note que toda definição da fonte já foi gerada com as preferências que escolhemos no site. O nome da minha fonte é "icomoon", tudo certo. Atenção no seletor [class^=ico-], [class*=ico-] : Para qualquer tag no HTML em que for aplicada uma classe iniciando por "ico-" (foi o prefixo que escolhi lá no site) ela terá as regras especificadas. Exemplo: <p class="ico-meuicone">UAU!</p> Um pouco mais abaixo temos os códigos da fonte. Cada ícone tem um código. Então vamos pensar: - Quando usarmos "ico-ALGUMACOISA" será inserido um código antes (por ser ::before) da tag na qual ele foi aplicado. - Dizemos nas regras que, para toda tag contendo uma classe iniciada pelo prefixo "ico-" será aplicada a fonte "icomoon". - No arquivo da fonte "icomoon", sempre que for encontrado um código (por exemplo: "\e600") ele será substituido por um ícone que corresponde àquele valor. COLOCANDO EM PRÁTICA Como dito anteriormente, site gera um arquivo CSS automaticamente contendo os seletores e as propriedades prontas para o uso, junto à uma pasta contendo todos os arquivos de fonte (EOT, SVG, Truetype e WOFF). Esse arquivo (style.css) pode ser editado e todas as regras da página podem ser escritas nele, ou então, você pode mantê-lo somente com as fontes e usar um outro arquivo CSS para estilizar a sua página (que é o que eu prefiro e farei nesse tutorial). Então, abra o bloco de notas (ou use um IDE) e crie um arquivo com extensão CSS, dê o nome que quiser. Chamarei o meu de "meucss.css". Em seguida crie um documento com extensão HTML contendo uma estrutura básica (como na imagem a seguir): Note que já importei os dois arquivos CSS que usaremos: O que baixamos do site (style.css) e o -ainda- vazio que acabemos de criar (meucss.css). Você pode usar os ícones (fontes) como quiser na sua página, nesse tutorial eu criarei um menu de navegação simples. Supondo que o meu menu seja para algum site de check-in ou algo semelhante, a estrutura será essa: Note que em todos os hyperlinks/âncoras estou usando aquelas classes que foram geradas no arquivo "style.css". Inserindo essas classes, o código definido no arquivo css (cada ícone tem um código especifico) será inserido antes do conteúdo, isto é, o ícone ficará na frente do texto do hyperlink. Se executarmos documento HTML agora teremos o seguinte resultado: Não é uma aparência bonita, mas o importante é que os ícones apareceram. Caso não tenha aparecido (esteja exibindo um quadrado com um código), verifique se colocou a pasta "fonts" (gerada pelo site) no mesmo diretório do documento HTML e CSS que estamos editando. Já fizemos o que queríamos, agora vamos melhorar a aparência e fazer com que essa estrutura torne-se algo mais atrativo. Primeiro, tornando essa estrutura um bloco na vertical e dando uma aparência melhor para o texto: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se Como resultado teremos: Como os ícones e o texto estão dentro da mesma estrutura, ambos terão a mesma cor (e também ficarão "colados" ao texto). Vamos dar um espaçamento e alterar somente a cor dos ícones: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se Como resultado: Para finalizar, um efeito para quando o usuário passar o cursor do mouse sobre o item, ele ser destacado: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se Resultado: Está pronto. Eu nem ia estilizar o menu pois a parte importante do tópico era o @font-face. Está ai, como dica. Use menos imagens nos seus sites, isso pode pesar bastante usado em excesso. Para ícones: use fontes, o desempenho aumenta consideravelmente, é muito mais rápido carregar uma fonte do que uma imagem de 'n'MB... Qualquer dúvida relacionado ao uso de @font-face ou sobre as propriedades usada no css (ou html), basta usar esse tópico para perguntar. CÓDIGO: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se | É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se | É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se </ rnxn > :slow: ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
Owner 7 Postado 7 de Agosto 2014 Compartilhar Postado 7 de Agosto 2014 Ótimo tutorial rnxn. É melhor que usar a própria <img> e fica até mais bonito, Adorei esse site :3 eu usava o iconfinder, que também é ótimo! ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
rnxn 2 Postado 7 de Agosto 2014 Autor Compartilhar Postado 7 de Agosto 2014 Ótimo tutorial rnxn. É melhor que usar a própria <img> e fica até mais bonito, Adorei esse site :3 eu usava o iconfinder, que também é ótimo! Pra falar a verdade, acho que esse negócio de usar imagens .png, .gif, .jpg na web vai acabar :/ É muito ruim adaptar uma imagem para um dispositivo móvel ou uma TV sem perder a qualidade. Ja é possível substituir o .gif com animações em css3 puro e a onda agora é imagens vetoriais (SVG). Antigamente era difícil fazer um circulo, hoje se faz em 1 linha: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se :slow: ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
I~Johnnie 28 Postado 8 de Agosto 2014 Compartilhar Postado 8 de Agosto 2014 Obrigado por compartilhar, só queria pedir se você quiser é claro, de deixar meio que Open Source, quero dar uma arrumada, eu copiei das imagens, mas é chato neh, mas ta valendo pois ficou um ótimo tutorial <3 A Jedi uses the Force for knowledge and defense, never for attack. -Yoda, Master. ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
rnxn 2 Postado 8 de Agosto 2014 Autor Compartilhar Postado 8 de Agosto 2014 O código está no final do tópico. Não entendi a parte em que fala de imagens.A quais imagens se refere se não usei nenhuma? :slow: ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
I~Johnnie 28 Postado 8 de Agosto 2014 Compartilhar Postado 8 de Agosto 2014 Não erro meu, quando clicava em cima pra copiar aparecia salvar imagem, aí agora que deu certo '-' meu computador ficou possuído... A Jedi uses the Force for knowledge and defense, never for attack. -Yoda, Master. ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
Posts Recomendados