É bem óbvio que não sou mais Beta Style, realmente pensei em parar com as minhas aulas, para não atrapalhar os novos betas (eles são incríveis, já disse isso? Todos eles), mas recebi apoio de muitas pessoas e acabei decidindo continuar, por ser algo que amo e algo que fiz por mim, como Rúbia e não como Beta.
Então, eu fiquei muito surpresa com o sucesso da primeira aula, muita gente comentou e eu tentei ao máximo respondendo quando via, acho que respondi todas.
Recebi alguns pedidos sobre futuras aulas, eu optei pelo "Font-face", que é algo que todo mundo pensa que é um bicho de sete cabeças, mas depois que você aprende é um amorzinho.
CONTINUEM MANDANDO SUGESTÕES DE AULAS
~ Estarei novamente respondendo os comentários de quaisquer dúvidas
Hoje eu vou ensinar uma coisinha que vem chamando atenção da galera dos Styles, o famoso “font-face”.
Bom, antes de mais nada, nós sabemos que dá para mudar a propriedade das fontes dos Styles no spirit. Isso é bem facinho e estamos acostumados a fazer usando o “font-family”.
O grande “X” da questão, é que o font-family recorre à suas fontes já instaladas no computador, por isso recomendamos sempre que vocês usem fontes próprias do Windows. Dessa forma, é muito comum vermos “font-family: Arial!important;” ou então “font-family: calibri!important”. Como exemplo o título do menu direito deste meu style (Spring Day), dá para visualizar o usual para modificar a fonte, onde está selecionado:
Muita gente acredita piamente que só se pode usar fontes do Windows, já que se o seu computador não reconhecer a fonte ele adapta ela para a que ele considera mais familiar, logo: não fica a fonte que você deseja.
Porém, com o “font-face” podemos usar fontes diferentes destas, desde que nós tenhamos os códigos da url dela. O Google Fonts hospeda uma boa quantidade de fontes diferenciadas que você pode estar usando.
Vemos aqui alguns exemplos (basta clicar na imagem que você é redirecionado ao style):
Nesta aula eu ensinarei como exportar esse link necessário e colocar ela no modelo para você poder utilizar-se do font-face.
Vamos Praticar:
Primeiro você precisa se familiarizar com o Google Fonts . É de lá que retiro as fontes que desejo usar, há um grande catálogo, você pode explorar, vai ver que tem como buscar por nome e tudo mais, a fonte que eu vou usar é do meu style Let me in , o nome dela é Homemade Apple.
Você aperta nesse botãozinho de (+), daí irá abrir um pop-up no inferior da tela, nele você pode verificar os detalhes da fonte, aliás, pode adicionar várias fontes ao mesmo tempo, como um “carrinho de compras” e depois selecionar a que mais lhe interessa.
Você vai ver isso aqui:
A partir daí você tem que clicar no @IMPORT para poder ter acesso ao url da fonte, ignore todos esses outros elementos, até dá para usar quando se edita html, porém não nos interessa no Spirit.
Entenderam? Apenas o link destacado, sem nem mesmo as aspas.
Cuidado, Se você estiver no “Standard” também aparecerá códigos que podem lhe confundir, NÃO É DELE QUE VOCÊS PRECISAM. Por isso vocês NECESSITAM ir para o @import, é ali que está a url da fonte.
Com a URL copiada, você vai no seu navegador e cola ela na barra de pesquisa, então vai gerar um resultado. Como esses códigos que colocamos no bloco de notas.
CLIQUE NA IMAGEM PARA AMPLIAR
E aí está nosso pote de ouro. Você copia ele e pode colar no topo do seu modelo.css, alguns são mais extensos que outros, não se assustem. Eu uso um editor diferente, mas é o mesmo efeito de vocês colocarem no bloco de notas ou no próprio site:
CLIQUE NA IMAGEM PARA AMPLIAR
Vamos para algumas considerações que eu fiz no processo.
Eu troquei algumas configurações de como era esse meu título do menu direito para exemplificar para vocês, pois achei que no menudireito ficaria mais fácil de entender. É o seguinte, vocês notaram que eu tirei propriedades que deixavam tudo em caixa alta, pois com essas letras cursivas elas realmente não combinam, normalmente eu também preciso aumentar o tamanho delas já que elas não ficam bem definidas pequeninas.
E não esqueçam que mesmo eu tendo colocado ela no menudireito, vocês podem colocá-las em qualquer lugar, recomendo o uso do "!important", e cuidado para não quebrarem nenhuma regra de legibilidade do canal.
História: Tattoed
Min Yoongi sabia que, depois daquela noite com Jungkook, jamais olharia para uma garrafa de whisky ou um estúdio de tatuagem do mesmo jeito.
E, honestamente, ele não sabia dizer..
História: Feliz aniversário, hyung
Jungkook havia dito que faria algo inesperado no aniversário de Jimin. Mas a selca que postara não possuía apenas o objetivo de parabenizar seu hyung. E Jimin não podia imaginar ..
História: Ah, Jungkook
Jimin sempre nutrira uma paixão pelo seu adorado maknae. E sempre que o via dormir sobre si, com os cílios acariciando levemente as bochechinhas coradas, ele comprovava ainda mai..
História: Shame on you
Aos olhos de qualquer um, Jeon Jungkook é um rapaz comum. Um estudante de medicina dedicado aos estudos e com um futuro promissor pela frente. Mas a verdade é que ele está bem lo..
História: Ele é Como Rheya
É o começo do primeiro dia de aula depois das férias de verão quando Jeon Jeongguk sente que o ano letivo de 1983 será como qualquer outro. Ou seja: comum e muito chato. O que de..
