El uso de fuentes es una parte indispensable del diseño web. A menudo, queremos usar una fuente específica en una página web, pero la fuente no es una fuente incorporada para los sistemas operativos convencionales, por lo que los usuarios no pueden ver el diseño real al navegar por la página. La forma más común para los diseñadores de arte es hacer el texto deseado en imágenes. ; Existen algunos métodos en Internet que usan tecnología SIFR o JavaScript/Flash Hack, pero la implementación es engorrosa o defectuosa. De lo que queremos hablar a continuación es cómo incrustar cualquier fuente en una página web solo a través del atributo @Font-Face de CSS.
primer paso
Obtenga los tres formatos de archivo para usar la fuente para asegurarse de que la fuente se pueda mostrar normalmente en los navegadores convencionales.
.Ttf o .otf, adecuado para Firefox 3.5, Safari, Opera
.Eot, para Internet Explorer 4.0+
.Svg, adecuado para Chrome, iPhone
Lo que queremos resolver a continuación es cómo obtener estos tres archivos de formato de una determinada fuente. En general, tenemos algún archivo de formato para esa fuente en cuestión (o ya encontrada en el sitio de recursos de diseño), el más común de los cuales es un archivo .ttf, que debemos convertir a los dos formatos de archivo restantes a través de este formato de archivo. La conversión de formatos de archivo 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 requeridos 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 que esta solución sea más práctica.
Paso 2
Después de obtener el archivo de fuentes en tres formatos, el siguiente paso es declarar la fuente en la hoja de estilo y usar la fuente donde se necesita.
La declaración de fuentes es la siguiente:
@Font-Face {
Font-Family: 'Fontnameregular';
src: url ('fontname.eot');
SRC: Local ('FontName regular'),
local ('fontname'),
URL ('FONTNAME.WOFF') Formato ('Woff'),
URL ('FONTNAME.TTF') FORMAT ('TRUETYPE'),
url ('fontname.svg#fontname') format ('svg');
}
/* donde se reemplaza el nombre de fuente con el nombre de su fuente*/
Use esta fuente donde la necesite en la página:
P {Font: 13px Fontnameregular, Arial, Sans-Serif;
H1 {Font-Family: Fontnameregular}
o
<p style = "Font-Family: Fontnameregular"> acurrucar la luna en tus manos, y la fragancia de las flores caídas llena tu ropa </p>
Aquí hay un ejemplo que hice a través de los dos pasos anteriores:
Ejecutar el cuadro de código
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Solución completa para integrar cualquier fuente en las páginas web - CSS9.NET </title>
<Link rel = "Stylesheet" href = "http://www.blueidea.com/articleimg/2009/12/7263/style.css"/>>
<style type = "text/css">
@Font-Face {
Font-Family: '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') format ('svg');
}
#poema{
tamaño de fuente: 45px;
Font-Family: Hakuyoxingshu7000regular;
Text-Align: Center;
}
#poem p {altura: 30px; line-height: 30px;}
</style>
</ablo>
<Body>
<div id = "testDiv">
<H1> Solución completa para integrar cualquier fuente en las páginas web - CSS9.NET </h1>
<h2> Acceda al texto original: <a href = "http://css9.net/css-font-face-solution/"> http://css9.net/css-font-face-solution/ </a > & nbsp; & nbsp; & nbsp; Sigue el desarrollo del front-end web- <a href = "http://css9s9.net"> css9.net </a> </h2>
<div id = "poema">
<h3> La nube es vegetariana </h3>
<p> Hay compañeros de clase en la capital, y nos reunimos en el pabellón vegetariano. </p> <p> El oyente todavía no está terminado, pero la persona que habla ya ha hablado mucho. </p> <p> Hay amigos en toda la habitación, y hablaré sobre las ciencias civiles. </p> <p> Envía pequeñas palabras en zen, ten cuidado y suave. </p>
</div>
</body>
</html>
[CTRL+A TODOS SELECCIÓN SELECCIÓN: puede modificar primero algún código y luego presione Ejecutar]
La fuente en el artículo anterior utiliza una fuente de script que ejecuta Fuente publicada por este blog.
Descargue el código fuente para este ejemplo: Ejemplo de fuente de incrustación de la página web
Texto original: http://css9.net/css-font-face-solution/