O uso da fonte é uma parte indispensável do web design. Freqüentemente, queremos usar uma fonte específica em uma página da web, mas a fonte não é uma fonte interna para os sistemas operacionais convencionais, para que os usuários não consigam ver o design real ao navegar na página. A maneira mais comum para os designers de arte fazer é transformar o texto desejado em imagens. 3. Existem alguns métodos na Internet que usam a tecnologia SIFR ou JavaScript/Flash Hack, mas a implementação é complicada ou defeituosa. O que queremos falar abaixo é como incorporar qualquer fonte em uma página da web somente através do atributo @font-face do CSS.
primeiro passo
Obtenha os três formatos de arquivo para usar a fonte para garantir que a fonte possa ser exibida normalmente nos navegadores convencionais.
.Ttf ou .otf, adequado para o Firefox 3.5, Safari, Opera
.Eot, para o Internet Explorer 4.0+
.Svg, adequado para Chrome, iPhone
O que queremos resolver abaixo é como obter esses três arquivos de formato de uma determinada fonte. Geralmente, temos algum arquivo de formato para a fonte em mãos (ou já encontrada no site de recursos de design), o mais comum é um arquivo .ttf, que precisamos converter para os dois formatos de arquivo restantes através deste formato de arquivo. A conversão dos formatos de arquivo de fontes pode ser obtida através do serviço de conversão de fontes on -line fornecido pelo site FontsQuirrel ou OnlineFontConverter. O primeiro site é recomendado aqui, o que nos permite selecionar os caracteres necessários para gerar arquivos de fontes (a última opção do serviço), que reduz bastante o tamanho dos arquivos de fonte e torna essa solução mais prática.
Etapa 2
Depois de obter o arquivo de fonte em três formatos, a próxima etapa é declarar a fonte na folha de estilo e usar a fonte onde é necessária.
A declaração de fonte é a seguinte:
@font-face {
Fonte-família: 'Fontnamineregulular';
src: url ('fontname.eot');
SRC: Local ('Fontname regular'),
Local ('Fontname'),
URL ('Fontname.woff') formato ('woff'),
URL ('Fontname.ttf') formato ('TrueType'),
url ('fontname.svg#fontname') formato ('svg');
}
/* Onde o FontName é substituído pelo nome da fonte*/
Use esta fonte onde você precisa na página:
P {Fonte: 13px FontnamineRegult, Arial, Sans-Serif;
H1 {Font-Family: Fontnamneregult}
ou
<p style = "font-family: fontnamneregult"> aconchegue a lua em suas mãos, e a fragrância de flores caídas enche suas roupas </p>
Aqui está um exemplo que fiz nas duas etapas acima:
Execute a caixa de código
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Solução completa para incorporar qualquer fonte em páginas da web - css9.net </ititle>
<link rel = "Stylesheet" href = "http://www.blueidea.com/articleimg/2009/12/7263/style.css"/>
<style type = "text/css">
@font-face {
Fonte-família: 'Hakuyoxingshu7000Gulares';
src: url ('http://www.blueidea.com/articleimg/2009/12/7263/7000.eot');
SRC: Local ('Hakuyoxingshu7000 regular'), local ('Hakuyoxingshu7000'), url ('http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf) format (' TruType '), url ('http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000) formato (' svg ');
}
#poema{
Size da fonte: 45px;
Fonte-família: Hakuyoxingshu7000Gular;
Alinhamento de texto: centro;
}
#poem p {altura: 30px; altura de linha: 30px;}
</style>
</head>
<Body>
<div id = "testDiv">
<H1> Solução completa para incorporar qualquer fonte em páginas da web - css9.net </h1>
<H2> Acesse o texto original: <a href = "http://css9.net/css-font-face-solution/"> http://css9.net/css-font-face-solution/ </a > & nbsp; & nbsp; & nbsp; siga o desenvolvimento do front-end da web- <a href = "http://css9.net"> css9.net </a> </h2>
<div id = "poema">
<H3> Cloud é vegetariano </h3>
<p> Existem colegas de classe na capital e nos encontramos no pavilhão vegetariano. </p> <p> O ouvinte ainda não está terminado, mas a pessoa que fala já falou muito. </p> <p> Existem amigos em toda a sala, e eu falarei sobre as ciências civis. </p> <p> Envie pequenas palavras em zen, tenha cuidado e gentil. </p>
</div>
</body>
</html>
[Ctrl+A todas as dicas de seleção: você pode modificar algum código primeiro e depois pressionar Run]
A fonte no artigo acima usa uma fonte de script de caneta -fonte publicada por este blog.
Faça o download do código -fonte deste exemplo: Exemplo de fonte de incorporação da página da web
Texto original: http://css9.net/css-font-face-solution/