El uso de fuentes es una parte integral del diseño web. A menudo, queremos utilizar una fuente específica en una página web, pero la fuente no es una fuente integrada en el sistema operativo principal, por lo que es posible que los usuarios no vean el diseño real cuando navegan por la página. El método más común utilizado por los diseñadores de arte es convertir el texto deseado en imágenes. Esto tiene varios defectos obvios: 1. Es imposible utilizar la fuente a gran escala. 2. El contenido de la imagen no es fácil de modificar. al uso de texto; 3. No es fácil modificar la fuente. Favorece el SEO del sitio web (los principales motores de búsqueda no utilizarán el contenido alternativo de imágenes como un factor eficaz para juzgar la relevancia del contenido web). Hay algunos métodos que utilizan la tecnología sIFR o javascript/flash hack en Internet, pero su implementación es engorrosa o defectuosa. De lo que voy a hablar a continuación es de cómo incrustar cualquier fuente en una página web sólo a través del atributo @font-face de CSS.
primer paso
Obtenga los tres formatos de archivo de la fuente que se utilizará y asegúrese de que la fuente se pueda mostrar normalmente en los navegadores convencionales.
Lo siguiente que hay que solucionar es cómo obtener estos tres archivos de formato de una determinada fuente. Generalmente, tenemos a mano un archivo de formato determinado de la fuente (o lo hemos encontrado en un sitio de recursos de diseño), el más común es un archivo .TTF, y necesitamos convertir este formato de archivo a los otros dos formatos de archivo. La conversión de formatos de archivos de fuentes se puede obtener a través del servicio de conversión de fuentes en línea proporcionado por el sitio web FontsQuirrel o onlinefontconverter. Aquí se recomienda el primer sitio, que nos permite seleccionar los caracteres que necesitamos para generar archivos de fuentes (la última opción del servicio), lo que reduce en gran medida el tamaño de los archivos de fuentes y hace más práctica esta solución.
Paso 2
Después de obtener los archivos de fuentes en tres formatos, el siguiente paso es declarar la fuente en la hoja de estilo y usar la fuente donde sea necesario.
La declaración de fuente es la siguiente:
@fuente-cara {
familia de fuentes: 'nombredefuenteRegular';
src: url('nombrefuente.eot');
src: local('nombredefuente Regular'),
local('Nombre de fuente'),
url('fontName.woff') formato('woff'),
url('fontName.ttf') formato('truetype'),
url('fontName.svg#fontName') formato('svg');
}
/*Reemplace fontName con el nombre de su fuente*/
Utilice la fuente donde sea necesario en la página:
p {fuente: 13px nombre de fuenteRegular, Arial, sans-serif }
h1{familia de fuentes: fontNameRegular}
o
<p style="font-family: fontNameRegular">Sosteniendo la luna en el agua, la fragancia de las flores caídas llena la ropa</p>
Aquí hay un ejemplo de lo que hice mediante los dos pasos anteriores:
Ejecutar cuadro de código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<title>Una solución completa para incrustar cualquier fuente en una página web: CSS9.NET</title>
<enlace rel="hoja de estilo" href=" http://www.blueidea.com/articleimg/2009/12/7263/style.css " />
<tipo de estilo="texto/css">
@fuente-cara {
familia de fuentes: '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{
tamaño de fuente: 45px;
familia de fuentes:hakuyoxingshu7000Regular;
alineación de texto:centro;
}
#poema p{altura:30px;altura de línea:30px;}
</estilo>
</cabeza>
<cuerpo>
<div id="pruebadiv">
<h1>Una solución completa para incrustar cualquier fuente en una página web: CSS9.NET</h1>
<h2>Visite el texto original: <a href=" http://css9.net/css-font-face-solution/">http://css9.net/css-font-face-solution/</a >  ;   ;Centrarse en el desarrollo web front-end- <a href=" http://css9.net">CSS9.NET</a></h2 >
<div id="poema">
<h3>Yunwei es vegetariano</h3>
<p>Hay compañeros de clase en Beijing y nos encontramos en el restaurante vegetariano. </p><p>Los oyentes aún no han terminado de hablar, pero los oradores han hablado demasiado. </p><p>La casa estaba llena de amigos que hablaban libremente de He Minke. </p><p>Envía pequeñas palabras en Zen, habla con cuidado y gentileza. </p>
</div>
</cuerpo>
</html>
[Ctrl+A Seleccionar todos los consejos: primero puede modificar parte del código y luego presionar Ejecutar]
La fuente del artículo anterior utiliza una fuente cursiva publicada anteriormente en este blog. Si te gusta, puedes descargarla.
Descargue el código fuente de este ejemplo: Ejemplo de fuente para inserción web
Texto original: http://css9.net/css-font-face-solution/