Jump to content


Photo

Importar Fonte Com Css


  • Faça o login para participar
22 replies to this topic

#1 Lengrat

Lengrat

    Mestre

  • Usuários
  • 638 posts
  • Sexo:Não informado

Posted 28/04/2003, 12:33

Galera, eu ouvi falar que eu possu usar um CSS para importar Fonte, fazendo um usuário enchergar a fonte de uma página minha, mesmo que ele nao possua a mesma fonte instalado em sua máquina.

Como é que funciona isto?
podem me dar um exemplo de código, com seu devido comenmtário?

[]s

Leng

#2 Dash

Dash

    :: Duodraco ::

  • Usuários
  • 173 posts
  • Sexo:Não informado
  • Localidade:Grande São Paulo

Posted 28/04/2003, 17:53

cara, isso até existe, mas só vi em apostilas. O que acontece é que é um tipo de fonte especial(de extensão .eot) que se usa neste atributo.
Essas fontes eu nunca vi pra download, mas pela apostila que eu vi também tem de ser implementado um suporte melhor pelos navegadores.
When the dragon flies and cries,
their tears become the tempest..


Visite:
Draco

Come with me....
Future World

#3 x-games

x-games

    Upgrade

  • Usuários
  • 1228 posts
  • Sexo:Não informado
  • Localidade:São Paulo
  • Interesses:Informática, internet, games, musicas, filmes, esportes, sexo

Posted 28/04/2003, 22:50

Me passaram este link aqui http://www.arquivosz...css/profont.htm mas eu nao entendi muita coisa nao ..
A vida é dura pra quem é mole

#4 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 29/04/2003, 00:01

Acho que isto demanda uma ultra-redação... vamos lá!

O que você leu a respeito, é uma pseudo-classe das especificações CSS Nível 2.

A pseudo-classe se chama @font-face { ... }
Ela é restrita apenas do IE5+, ou seja, aquele tutorial que alguém mandou está errado. Você pode chacar a compatibilidade neste link: Clique Aqui

Bem, para usar este tipo de definição, é necessário que você tenha a fonte que queira usar no formato EOT, que eu vou falar mais tarde.
Partindo do pressuposto que você tenha a font no formato correto (Não pode ser outro... já fiz vários testes, então não seja tosco e tente redescobrir o fogo), a correta utilização da pseudo-classe é assim:

@font-face {
font-family: valor;
src: url(url_válida);
}


No lugar do font-family, é a nova especificação da fonte, ou seja, o nome que você está "criando". Fiz um exemplo para que você pudesse visualizar. A página é essa: Clique aqui
No exemplo, utilizei a fonte mslogo.eot e defini a minha nova fonte com o título de msSUX. HEHEHE... Gracinhas a parte, vamos continuar.

Assim, tive a seguinte formatação:

@font-face {
font-family: msSUX;
src: url(mslogo.eot);
}


Eu poderia ter dado maiores especificações, como por exemplo, setar que a fonte, por default, já fosse negrito. Para isto, teria adicionado font-weight: bold logo após o font-family: valor; mas isso não vem ao caso.

Agora, para chamar a nova fonte, uso um controle font-family padrão (CSS1) ou defino direto na tag HTML.
Exemplos:

<P STYLE="font-family: msSUX">M</P>
<P><FONT FACE="msSUX">M</FONT></P>

Particularmente, uso o modelo número 1, ou seja, o atributo font-family, que fa zparte das especificações CSS Nível 1.

NOTA: Devo ressaltar novamente que a pseudo-classe @font-face só funciona no IE5+, e que não roda no NS, Mozilla, Phoenix, etc.
Para contornar isto, faça assim:

<P STYLE="font-family: msSUX, Verdana">M</P>
<P><FONT FACE="msSUX, Verdana">M</FONT></P>

Dessa forma, ele tenta usar a fonte criada. Caso o browser não for o IE5+, ele simplesmente ignora o nome msSUX e tenta o próximo (pois o usuário naum tem a fonte msSUX no PC). Assim, ele imprimirá o M na fonte Verdana. Experimente entrar na página de teste que eu fiz usando o Mozilla ou qualquer outro que não seja o IE.

Bem, o conceito da pseudo-classe @font-face tá dado.
Falta explicar agora onde o pessoal arranja ou cria a tal fa fonte no formato EOT.
Para fazer isto, existe um programa, da Micro$oft, chamado de WEFT (Web Embedding Fonts Tool). Atualmente, ele está na versão 3.1 BETA. A URL para o site dele é: Clique aqui

Neste site, você poderá fazer o download do WEFT 3.1 BETA. Maiores informações também podem ser encontradas lá (sobre como converter sua fonte TTF em EOT, etc.

Espero ter ajudado...

Grato,
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#5 Dash

Dash

    :: Duodraco ::

  • Usuários
  • 173 posts
  • Sexo:Não informado
  • Localidade:Grande São Paulo

Posted 29/04/2003, 08:28

Valeu GB, explicou tudinho... eu tinha muitas duvidas quanto a isso tb.
Valew
When the dragon flies and cries,
their tears become the tempest..


Visite:
Draco

Come with me....
Future World

#6 Lengrat

Lengrat

    Mestre

  • Usuários
  • 638 posts
  • Sexo:Não informado

Posted 29/04/2003, 10:45

Ai..agora confundiu tudo, esse lence de .TTF e .EOT

Ontem, uma amiga me passou este exemplo:

<STYLE TYPE="text/css" MEDIA="screen, print">
      @font-face {
        font-family: "Robson Celtic";
        src: url("http://site/fonts/rob-celt")
      }
      H1 { font-family: "Robson Celtic", serif }
    </STYLE>


Este exemplo é válido ou não?


[]s

Leng

#7 Dinho

Dinho
  • Visitantes

Posted 29/04/2003, 12:12

Realmente ficou claro agora como usar tipos de fontes em páginas usando CSS, já tinha visto algo a respeito, porém nunca tinha feito funcionar.

Sobre as fontes funcionarem no Netscape, já li em alguma apostila sobre uma maneira de se fazer isso, só não lembro como é que era.

#8 GB na UFSCar (InterCOMP é amanhã

GB na UFSCar (InterCOMP é amanhã
  • Visitantes

Posted 30/04/2003, 09:39

Este é o exemplo de como usar a pseudo-classe @font-face.

Você pode encontrar este exemplo se eu naum me engano no site da WEFT.

Valeu,

#9 Guest

Guest
  • Visitantes

Posted 01/05/2003, 08:32

Só fiquei mesmo com uma dúvida.
Quando ponho o código:

@font-face {
font-family: msSUX;
src: url(mslogo.eot);
}


Tudo o que escrever vai ficar nessa fonte? (neste caso mslogo.eot)

#10 Chinello Cybernético

Chinello Cybernético

    Simplesmente "Chinello"

  • Usuários
  • 1892 posts
  • Sexo:Masculino
  • Localidade:Canoas - RS

Posted 01/05/2003, 23:24

Naum véio..

Como tá lá em cima quando o GB explicou tudo..

Vc pode usar essa fonte dessas duas maneiras:

<P STYLE="font-family: msSUX">M</P>
<P><FONT FACE="msSUX">M</FONT></P>


Se vc tivesse lido com mais atenção, naum teria essa dúvida... ;)

Fui.. :P
Diego Sampaio - kroW - PHP Framework > http://chinelloweb.net/
chinello at gmail dot com

System > Athlon 64 3200+ Mobile | Kubuntu 7.04 Fesity Fawn AMD64 | Kernel 2.6.20-16
Coding @ KDE 3.5.7 | PHP 5.2.1 | Apache 2.2.3 | MySQL 5.0.38

#11 hardjob

hardjob
  • Visitantes

Posted 05/11/2003, 08:57

não entendi bulhufas

#12 Runner

Runner

    Turista

  • Usuários
  • 31 posts
  • Sexo:Não informado
  • Localidade:Salvador - Bahia - Brasil

Posted 05/11/2003, 09:51

Galera é o seguinte,

peguei o programa pra transformar as fontes de .ttf para .eot o Microsoft Weft
gerei o arquivo .eot coloquei na page o codigo certinho e tal
@font-face {
font-family: valor;
src: url(url_válida);
}
tirei a fonte que usei da pasta de fonts do windows mas não consigo visualizar a fonte na page, sempre aparece uma fonte padrão como se não existisse aquele codigo css

alguem poderia me ajudar?

desde já agradeço
"Negar os seus instintos é negar a si próprio" (The Matrix)
--------------
Estou atrás de um host gratuito com PHP/MySQL ou ColdFusion.

#13 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 05/11/2003, 12:17

Vejamos...

Você definiu a URL direitinho?

Se sim, então veja se você a aplicou corretamente na página. Prefira definir classes de estilos no HEAD do documento, definições diretas às vezes comprometem o funcionamento do recurso.

Após isto, cheque seu browser. Veja se ele é compatível com o @font-face. Caso seja, então talvez o problema esteja ocorrendo por causa da EOT.

Eu tentei várias vezes criar uma fonte EOT, mas não consegui. Ontem me enviaram a URL de um tutorialzinho (simples, mas que pelo visto funciona): http://www.imasters..../coluna_css.php


Caso o problema persista, entre em contato comigo.

[]s,
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#14 Runner

Runner

    Turista

  • Usuários
  • 31 posts
  • Sexo:Não informado
  • Localidade:Salvador - Bahia - Brasil

Posted 11/11/2003, 15:37

vlw Guilherme
eu consegui..
mas só consegui em arquivos .html em .php nao consegui..
alguem sabe como q faz pra funcionar em php?
"Negar os seus instintos é negar a si próprio" (The Matrix)
--------------
Estou atrás de um host gratuito com PHP/MySQL ou ColdFusion.

#15 maksti

maksti

    Turista

  • Usuários
  • 31 posts
  • Sexo:Não informado

Posted 20/05/2004, 09:37

vlw Guilherme
eu consegui..
mas só consegui em arquivos .html em .php nao consegui..
alguem sabe como q faz pra funcionar em php?

Runner tu conseguiu fazer?

Posta o seu link para ver como ficou... pq o meu não rolou. :wacko:

Segue abaixo os links que utilizei.

Link da fonte:
http://www.agitatudo...ts/ALIENATO.eot

Link do HTML:
http://www.agitatudo...com.br/psy.html

Código do CSS

<STYLE TYPE="text/css">
<!-- /* $WEFT -- Created by: t () on 18/5/2004 -- */
@font-face {
font-family: alienator;
font-style: normal;
font-weight: normal;
src: url(http://www.agitatudo...ts/ALIENATO.eot);
}
-->
</STYLE>

Código HTML (resumido)

<table cellspacing="2" cellpadding="0" border="0" align="center">
<tr>
<td colspan="2">
Alfabeto Psicodélico !!!<br>
<br>
</td>
</tr>
<tr>
<td style="font-family:alienator; font-size: 20px">
A<br>
</td>
<td style="font-size: 22px">
A<br>
</td>
</tr>
</table

Link da imagem de como deveria ficar:
http://www.agitatudo...images/foto.jpg


Agradeço quem puder me ajudar... gostei muito do post... dá pra inovar p/ kramba...

[]´s
Sucesso !!!
Aproveite sempre o dia de hoje !!!

Paz, luz e vibe !!! E uns freelá pra ajudar né?




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq