Importar Fonte Com Css
#1
Posted 28/04/2003, 12:33
Como é que funciona isto?
podem me dar um exemplo de código, com seu devido comenmtário?
[]s
Leng
- Miguceamma likes this
#2
Posted 28/04/2003, 17:53
Essas fontes eu nunca vi pra download, mas pela apostila que eu vi também tem de ser implementado um suporte melhor pelos navegadores.
their tears become the tempest..
Visite:
Draco
Come with me....
Future World
#3
Posted 28/04/2003, 22:50
#4
Posted 29/04/2003, 00:01
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,
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>
#6
Posted 29/04/2003, 10:45
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
Posted 29/04/2003, 12:12
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ã
Posted 30/04/2003, 09:39
Você pode encontrar este exemplo se eu naum me engano no site da WEFT.
Valeu,
#9 Guest
Posted 01/05/2003, 08:32
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
Posted 01/05/2003, 23:24
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..
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
Posted 05/11/2003, 08:57
#12
Posted 05/11/2003, 09:51
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
--------------
Estou atrás de um host gratuito com PHP/MySQL ou ColdFusion.
#13
Posted 05/11/2003, 12:17
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,
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>
#14
Posted 11/11/2003, 15:37
eu consegui..
mas só consegui em arquivos .html em .php nao consegui..
alguem sabe como q faz pra funcionar em php?
--------------
Estou atrás de um host gratuito com PHP/MySQL ou ColdFusion.
#15
Posted 20/05/2004, 09:37
Runner tu conseguiu fazer?vlw Guilherme
eu consegui..
mas só consegui em arquivos .html em .php nao consegui..
alguem sabe como q faz pra funcionar em php?
Posta o seu link para ver como ficou... pq o meu não rolou.
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 !!!
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)