O uso de fontes é parte integrante do web design. Freqüentemente, queremos usar uma fonte específica em uma página da web, mas a fonte não é uma fonte integrada do sistema operacional convencional, então os usuários podem não ver o design real ao navegar na página. O método mais comum usado pelos designers de arte é transformar o texto desejado em imagens. Isso apresenta várias falhas óbvias: 1. É impossível usar a fonte em grande escala. 2. O conteúdo da imagem não é fácil de modificar em comparação; ao uso de texto; 3. Não é fácil modificar a fonte que conduz ao SEO do site (os principais mecanismos de pesquisa não usarão o conteúdo alternativo da imagem como um fator eficaz para julgar a relevância do conteúdo da web). Existem alguns métodos que usam tecnologia sIFR ou hack javascript/flash na Internet, mas sua implementação é complicada ou deficiente. O que vou falar a seguir é como incorporar qualquer fonte em uma página web apenas através do atributo @font-face do CSS.
primeiro passo
Obtenha os três formatos de arquivo da fonte a ser usada e certifique-se de que a fonte possa ser exibida normalmente nos navegadores convencionais.
A próxima coisa a ser resolvida é como obter esses três arquivos de formato de uma determinada fonte. Geralmente, temos um determinado arquivo de formato de fonte em mãos (ou o encontramos em um site de recursos de design), o mais comum é um arquivo .TTF e precisamos converter esse formato de arquivo para os outros dois formatos de arquivo. A conversão de formatos de arquivo de fonte pode ser obtida através do serviço de conversão de fonte online fornecido pelo site FontsQuirrel ou onlinefontconverter. Aqui é recomendado o primeiro site, que nos permite selecionar os caracteres que necessitamos para gerar os arquivos de fontes (última opção do serviço), o que reduz bastante o tamanho dos arquivos de fontes e torna esta solução mais prática.
Etapa 2
Após obter os arquivos de fontes em três formatos, o próximo passo é declarar a fonte na folha de estilos e utilizá-la onde for necessário.
A declaração da fonte é a seguinte:
@fonte-face {
família de fontes: 'fontNameRegular';
src: url('nomedafonte.eot');
src: local('nomeFonte Regular'),
local('nomedafonte'),
url('nomedafonte.woff') formato('woff'),
url('nomedafonte.ttf') formato('truetype'),
url('nomedafonte.svg#nomedafonte') formato('svg');
}
/*Substitua fontName pelo nome da fonte*/
Use a fonte onde necessário na página:
p { fonte: 13px fontNameRegular, Arial, sans-serif };
h1{família de fontes: fontNameRegular}
ou
<p style="font-family: fontNameRegular">Segurando a lua na água, a fragrância das flores caídas enche as roupas</p>
Aqui está um exemplo do que fiz nas duas etapas acima:
Execute a caixa de código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Uma solução completa para incorporar qualquer fonte em uma página web - CSS9.NET</title>
<link rel="stylesheet" href=" http://www.blueidea.com/articleimg/2009/12/7263/style.css " />
<style type="texto/css">
@fonte-face {
família de fontes: 'hakuyoxingshu7000Regular';
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') formato('truetype'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000') formato('svg');
}
#poema{
tamanho da fonte: 45px;
família de fontes: hakuyoxingshu7000Regular;
alinhamento de texto:centro;
}
#poema p{altura:30px;altura da linha:30px;}
</estilo>
</head>
<corpo>
<div id="testdiv">
<h1>Uma solução completa para incorporar qualquer fonte em uma página web - CSS9.NET</h1>
<h2>Visite o texto original: <a href=" http://css9.net/css-font-face-solution/">http://css9.net/css-font-face-solution/</a >  ;   ;Foco no desenvolvimento front-end da Web - <a href=" http://css9.net">CSS9.NET</a></h2 >
<div id="poema">
<h3>Yunwei é vegetariano</h3>
<p>Há colegas de classe em Pequim e nos encontramos no restaurante vegetariano. </p><p>Os ouvintes ainda não terminaram de falar, mas os oradores falaram demais. </p><p>A casa estava cheia de amigos conversando livremente sobre He Minke. </p><p>Envie pequenas palavras em Zen, fale com cuidado e gentileza. </p>
</div>
</body>
</html>
[Ctrl+A Selecionar todas as dicas: você pode modificar parte do código primeiro e depois pressionar Executar]
A fonte do artigo acima usa uma fonte cursiva de caneta lançada anteriormente neste blog. Se gostar, você pode baixá-la.
Baixe o código-fonte deste exemplo: Exemplo de fonte incorporada na Web
Texto original: http://css9.net/css-font-face-solution/