Como adicionar alguma fonte não-padrão para um site?
https://stackoverflow.com/questions/107936
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Existe uma maneira de adicionar alguma fonte personalizada no site sem o uso de imagens, flash ou alguns outros gráficos?
Por exemplo, eu estava trabalhando em algum site de casamento, e eu estava achando um monte de boas fontes para esse assunto, mas não consigo encontrar o caminho certo para adicionar essa fonte no servidor, e como faço para incluir esse fonte com CSS no HTML? Isso é possível fazer sem gráficos?
Solução
Isso poderia ser feito via CSS:
<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
É href="http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp" suportado por todos os navegadores regulares se você usar TrueType- fontes (TTF) ou o web Open Font Format (WOFF).
Outras dicas
Você pode adicionar um pouco de fontes via Google Web Fonts .
Tecnicamente, as fontes são hospedados pelo Google e você ligá-los no cabeçalho HTML. Em seguida, você pode usá-los livremente em CSS com @font-face ( ler sobre ele ).
Por exemplo:
Na seção <head>:
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
Então, em CSS:
h1 { font-family: 'Droid Sans', arial, serif; }
A solução parece bastante confiável (mesmo Smashing Magazine usa-lo para um título de artigo. ). Há, no entanto, não tantas fontes disponíveis até agora em Diretório Font Google .
O caminho a percorrer está usando o font-face declaração CSS @ que permite aos autores especificar fontes on-line para um texto em exibição em suas páginas web. Ao permitir que os autores para fornecer suas próprias fontes, @ font-face elimina a necessidade de depender do número limitado de fontes usuários tenham instalado em seus computadores.
Dê uma olhada na tabela a seguir:
Como você pode ver, existem vários formatos que você precisa saber sobre, principalmente, devido à compatibilidade cross-browser. O cenário em dispositivos móveis não é muito diferente.
Solutions:
1 - compatibilidade do navegador completa
Este é o método com o mais profundo apoio possível agora:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
2 - A maioria do navegador
As coisas são mudando fortemente para WOFF embora, assim você pode provavelmente começar afastado com:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
3 - Somente os navegadores mais recentes
Ou mesmo apenas WOFF.
Você, então, usá-lo como este:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
Referências e Leitura adicional:
Isso é principalmente o que você precisa saber sobre como implementar esta funcionalidade. Se você quiser pesquisar mais sobre o assunto eu vou incentivar para dar uma olhada nos seguintes recursos. A maioria do que eu coloquei aqui é extraído da seguinte
Se por fonte não padrão, você fonte personalizada médio de um formato padrão, aqui está como eu faço isso, e ele funciona para todos os navegadores que eu verificados até agora:
@font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}
então você só precisa tanto o TTF e fontes EOT. Algumas ferramentas disponíveis on-line pode fazer a conversão.
Mas se você deseja anexar fonte em um formato não padrão (bitmaps etc), eu não posso ajudá-lo.
Eu descobri que a maneira mais fácil de ter fontes não-padrão em um site é para uso sIFR
Ele envolve o uso de um objeto Flash que contém a fonte, mas se degrada muito bem com o padrão de texto / font se o Flash não está instalado.
O estilo é definido no seu CSS e JavaScript configura a substituição do Flash para seu texto.
Editar:. (Eu ainda recomendo o uso de imagens para fontes não-padrão como sIFR acrescenta tempo para um projeto e pode exigir manutenção)
O artigo font-face no IE:. Fazendo web Fonts Trabalho diz que trabalha com todos os três principais navegadores
Aqui está um exemplo que eu fui trabalhar: http://brendanjerwin.com/test_font.html
Mais discussão está em incorporação de fontes .
Typeface.js e Cufon duas outras opções interessantes. Eles são componentes JavaScript que tornam os dados fonte especial em formato JSON (que você pode converter de TrueType ou OpenType formatos em seus sites) através do novo elemento
O principal problema com ambos (a partir de agora) é que a seleção de texto não funciona ou, pelo menos, funciona apenas bastante sem jeito.
Ainda assim, é muito bom para as manchetes. corpo de texto ... Eu não sei.
E é surpreendentemente rápido.
Ou você pode tentar sIFR . Eu sei que ele usa Flash, mas apenas se estiver disponível. Se o Flash não estiver disponível, ele exibe o texto original na sua fonte (CSS) originais.
Existe uma maneira de adicionar alguma fonte personalizada no site sem usar ... Flash?
Claro, uso Silverlight .
A técnica que o W3C tem recomendado para fazer isso é chamado de "embutir" e está bem descrito pelos três artigos aqui: incorporação de fontes . Em meus experimentos limitados, eu descobri esse processo sujeito a erros e tiveram sucesso limitado em fazê-lo funcionar em um ambiente multi-browser.
Safari e Internet Explorer ambos suportam a regra CSS @ font-face, porém eles suportam dois tipos de fonte incorporados diferentes. Firefox está planejando para suportar o mesmo tipo que a Apple algum tempo em breve. SVG pode incorporar fontes, mas não é que amplamente suportado ainda (sem um plugin).
Eu acho que a solução mais portátil que eu vi é usar uma função JavaScript para substituir títulos etc. com uma imagem gerada e armazenada em cache no servidor com a sua fonte de escolha - de que maneira você simplesmente atualizar o texto e don' t tem que coisas ao redor em Photoshop.
Se você usar ASP.NET, é realmente fácil de gerar fontes com base imagem sem realmente ter que instalar (como na adição à base fonte instalada) fontes no servidor usando:
PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];
e, em seguida, desenhar com essa fonte em um Graphics.
Parece que ele só funciona no Internet Explorer, mas uma pesquisa no Google rápida para rendimentos "html incorporar fontes" http://www.spoono.com/html/tutorials/tutorial.php?id=19
Se você quiser ficar independente de plataforma (e deve!) Você terá que usar as imagens, ou então é só usar uma fonte padrão.
Eu fiz um pouco de pesquisa e desenterrado substituição de texto dinâmico (publicado 2004-06-15).
Esta técnica utiliza imagens, mas que parece ser "mãos livres". Você escreve seu texto, e você deixou alguns scripts automatizados que automatizado localizar e substituir na página para você em tempo real.
Ele tem algumas limitações, mas é provavelmente uma das escolhas mais fáceis (e mais browser compatível) do que todo o resto eu já vi.
Também é possível usar fontes WOFF - exemplo aqui
@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
}
Apenas simplesmente fornecer o link para fonte real como este e você vai ser bom para ir
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>
<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>
Typeface.js JavaScript Way:
Com Typeface.js você pode incorporar personalizado fontes em suas páginas da web para que você não ter para processar texto a imagens
Em vez de criar imagens ou usando piscar apenas para mostrar gráfico do seu site texto na fonte que você quer, você pode usar Typeface.js e escrever em HTML simples e CSS, assim como se os visitantes tiveram a fonte instalada localmente.
Monotype lançado recentemente um monte de suas fontes, juntamente com um novo sistema para usá-los em suas páginas web: http : //www.webfonts.fonts.com/
Veja o artigo 50 Útil design Ferramentas para Beautiful web Tipografia para métodos alternativos.
Eu tenho usado apenas Cufon . Descobri que é confiável e muito fácil de usar, então eu preso com ele.
Se você tem um arquivo de sua fonte, então você vai precisar adicionar mais formatos de essa fonte para outros navegadores.
Para este efeito, eu uso gerador de fonte como Fontsquirrel ele fornece todos os formatos de fonte & sua @ CSS font-face, você só precisa apenas arrastar e soltá-lo em seu arquivo CSS.
Estou gráficos medo é sua única opção neste caso.
