Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

Fonte Universal

4 participantes

Release's Release's  • Qua 30 Jul 2014 - 13:39

Fonte Universal Empty Fonte Universal Qua 30 Jul 2014 - 13:39

Minha questão:
Olá Convidado !

Bem queria saber como posso colocar uma Fonte " Universal " tipo uma que eu tenha , e as outras pessoas vejam mesmo se a pessoa não tiver a Fonte instalada no Computador .... o Nome da Fonte e Lobster 1.4 ...

Até Mais !


Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

waghcwb waghcwb  • Qua 30 Jul 2014 - 13:51

Fonte Universal Empty Re: Fonte Universal Qua 30 Jul 2014 - 13:51

Olá,

O senhor deve usar a propriedade @font-face do CSS. Veja bem, vai precisar de um host externo para poder hospedar a fonte, ok?

Caso não tenha conta na Hostinger ou Delhost, aconselho que use o Google Drive, nele é possível "upar" este tipo de arquivo, e então basta seguir as recomendações de algum destes sites:

Documentação oficial:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Tópito em Inglês na MDN:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Postagem em Português do Tableless
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

E aqui a tabela de compatibilidade:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Abraços..

Release's Release's  • Qua 30 Jul 2014 - 18:04

Fonte Universal Empty Re: Fonte Universal Qua 30 Jul 2014 - 18:04

Cara me passa o Code pois não entendi muito bem do que você falou

Cepheus Cepheus  • Qua 30 Jul 2014 - 18:37

Fonte Universal Empty Re: Fonte Universal Qua 30 Jul 2014 - 18:37

Não entendeu? tá de brincadeira...

é simples veja:
Código:
@font-face {
      font-family: "NOME_DA_FONTE_QUE_VOCÊ_HOSPEDOU";
      src: url("ENDEREÇO_DA_FONTE_QUE_VOCÊ_HOSPEDOU");
    }
    

adicionando a fonte em algum local: (no exemplo estamos adicionando no body):
Código:
body { font-family: "NOME_DA_FONTE_QUE_VOCÊ_HOSPEDOU", serif }



Como foi dito você precisa de um host para hospedar a fonte que deseja usar.
se não sabe onde hospedar, pesquise por: "host free" ou "hospedagem gratuita"
você encontrará inúmeros sites que oferecem serviços gratuitamente.

ou como foi dito no tópico anterior, use o  Google Drive,
também tem a opção do Google Sites.

entre outras tantas.
Até.

Release's Release's  • Qua 30 Jul 2014 - 19:33

Fonte Universal Empty Re: Fonte Universal Qua 30 Jul 2014 - 19:33


  1. @font-face {
  2.       font-family: "Lobster 1.4";
  3.       src: url("[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]");
  4.     }

Código:
body { font-family: "Lobster 1.4", serif }

Estaria Certo Assim?

Cepheus Cepheus  • Qua 30 Jul 2014 - 20:12

Fonte Universal Empty Re: Fonte Universal Qua 30 Jul 2014 - 20:12

Mais ou menos,
primeiro, todo arquivo que você hospedar no Google Drive, e for usar na web você precisa dar as permissões ao arquivo no caso "Publico na Web"
Mas eu hospedei essa fonte para que você possa ver como vai ficar: (se quiser pode usar-la)

O link que recebi foi o seguinte: https://drive.google.com/file/d/0B3OkiMRv7LXpaU1xV1BzMzRWQlk/edit?usp=sharing
A parte marcada em vermelho você adiciona:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

ficando assim:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]0B3OkiMRv7LXpaU1xV1BzMzRWQlk

Agora adicione no seu código:


Código:
@font-face {
      font-family: "Lobster 1.4";
      src: url("https://googledrive.com/host/0B3OkiMRv7LXpaU1xV1BzMzRWQlk");
    }

A segunda parte está correta:
(lembrando que body é um exemplo de um local onde estaria simulando que a fonte vai incorporar)
Código:
body { font-family: "Lobster 1.4", serif }

waghcwb waghcwb  • Qua 30 Jul 2014 - 20:43

Fonte Universal Empty Re: Fonte Universal Qua 30 Jul 2014 - 20:43

Outro detalhe que seria interessante ressaltar aqui, é o seguinte, caso o navegador do usuário não suporte a propriedade font-face, ou mesmo não consiga baixar ela por algum motivo, seja ele qual for. Nesses casos, é interessante adicionar um fallback, que seria a técnica de usar alguma fonte padrão dos computadores por ai (aquelas que já na maioria dos SO's) caso a sua fonte personalizada não carregue.

A técnica é bem simples, basta adicionar o nome das fontes desejadas logo após o nome da font-face. No caso, supondo que queira usar a font "Adobe", e caso essa fonte não seja carregada a fonte que vai substituir ela será a "Arial", bastaria fazer da seguinte maneira:
Código:
.elemento{
  font-family: "Adobe", Arial;
}

Ainda é interessante adicionar mais opções de fontes, para isso, basta você colocar uma vírgula e continuar as declarações.
Código:
.elemento{
  font-family: "Adobe", Arial, "Trebuchet MS";
}

Se caso o navegador do usuário não tiver nenhuma das fontes, ou mesmo der algum erro, existe uma última opção que é adicionar um família de fontes para a sua declaração, existem várias, você pode fazer uma pesquisada aprofundada no Google, ou checar os links que vou deixar no final do tópico.
Código:
.elemento{
  font-family: "Adobe", Arial, "Trebuchet MS", sans-serif;
}

Veja, no exemplo acima falei basicamente isso para o navegador:
"Navegador, por favor, tente carregar a fonte "Adobe", caso não consiga, tente carregar a fonte Arial, caso ainda não consiga, tente com a "Trebuchet MS", e se por algum acaso nenhuma das anteriores der certo, por favor, carregue qualquer fonte da família "sans-serif"

Interessante, né?

Leia mais a respeito nestes links:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

E cara, não se detenha ao que te passam aqui, corra atrás também. Conhecimento nunca é demais, eu te passei diversos links que elucidam esse assunto de maneira a não ficar nenhuma dúvida, me parece que você nem se deu ao trabalho de ler os links.

Leia os links, tente entender, ai caso tenha uma dúvida, você pode perguntar para nós. Ai nós vamos te ajudar com gosto, e não com aquele pensamento "esse cara quer tudo na mão". Vamos lhe ajudar com o pensamento que você ao menos tentou fazer, e enfrentou algum problema assim como qualquer um de nós sempre enfrenta, mas o que diferencia os bons dos ruins, é o que eles levam de experiência de seus erros..

Abraços...

iConnect iConnect  • Ter 12 Ago 2014 - 13:08

Fonte Universal Empty Re: Fonte Universal Ter 12 Ago 2014 - 13:08

[sucesso=Tópico Resolvido; e Bloqueado]Mais de três dias sem resposta do membro.[/sucesso]Movido para: Arquivo - Pedido de código

Conteúdo patrocinado  • 

Fonte Universal Empty Re: Fonte Universal

Permissões neste sub-fórum
Não podes responder a tópicos