domingo, 29 de enero de 2012
OpenType es un formato tipográfico desarrollado por Microsoft en conjunto con Adobe , el cual se usa para tipografía de alta calidad, superando a sus antecesores TrueType y Tipo 1 ó PostScript.
Anteriormente mostramos como PHP, podía manejar el formato TrueType de forma nativa con la función imagettftext. Lamentablemente PHP no tiene soporte, o alguna librería que soporte de forma nativa OpenType. Sin embargo CSS3 lo soporta.
Para el siguiente ejemplo, he decidido usar fuentes del proyecto GNU FreeFont las cuales descargué del sitio cdlibre.org, las cuales pueden descargarse en este enlace. Una vez descargadas en una carpeta creada previamente,procederemos a crear con un editor de textos el siguiente index.html que guardaremos en la misma carpeta :
Una vez ya creado, procederemos a crear el archivo "styles.css":
@font-face {
font-family: "FreeSans";
src: url(FreeSans.otf);
}
@font-face {
font-family: "FreeSansBold";
src: url(FreeSansBold.otf);
}
@font-face {
font-family: "FreeSerif";
src: url(FreeSerif.otf);
}
@font-face {
font-family: "FreeMono";
src: url(FreeMono.otf);
}
h1{
font-size:5em;
}
.FreeSans{
font-family: 'FreeSans';
color:#9C2121;
}
.FreeSansBold{
font-family: 'FreeSansBold';
color:#50B48A;
}
.FreeSerif{
font-family: 'FreeSerif';
color:gray;
}
.FreeMono{
font-family: 'FreeMono';
color:#000000;
}
Anteriormente mostramos como PHP, podía manejar el formato TrueType de forma nativa con la función imagettftext. Lamentablemente PHP no tiene soporte, o alguna librería que soporte de forma nativa OpenType. Sin embargo CSS3 lo soporta.
Para el siguiente ejemplo, he decidido usar fuentes del proyecto GNU FreeFont las cuales descargué del sitio cdlibre.org, las cuales pueden descargarse en este enlace. Una vez descargadas en una carpeta creada previamente,procederemos a crear con un editor de textos el siguiente index.html que guardaremos en la misma carpeta :
Una vez ya creado, procederemos a crear el archivo "styles.css":
@font-face {
font-family: "FreeSans";
src: url(FreeSans.otf);
}
@font-face {
font-family: "FreeSansBold";
src: url(FreeSansBold.otf);
}
@font-face {
font-family: "FreeSerif";
src: url(FreeSerif.otf);
}
@font-face {
font-family: "FreeMono";
src: url(FreeMono.otf);
}
h1{
font-size:5em;
}
.FreeSans{
font-family: 'FreeSans';
color:#9C2121;
}
.FreeSansBold{
font-family: 'FreeSansBold';
color:#50B48A;
}
.FreeSerif{
font-family: 'FreeSerif';
color:gray;
}
.FreeMono{
font-family: 'FreeMono';
color:#000000;
}
Observemos que para que esto funcione cada una de las secciones font-family lleva el nombre de la fuente, y que mas abajo cada una de estas secciones es declarada como una clase, cada una de las cuales es invocada en las secciones del index.html con su respectivo nombre y que para ello previamente debemos cargar el archivo "styles.css" con un dentro de la sección del archivo index.html, y que para el ejemplo hemos descomprimido cada una de las fuentes en el mismo directorio donde están index.html y styles.css. Recordemos usar siempre archivos de fuentes OpenType o True Type, que nos garanticen la libertad de uso, y que no tengamos problemas con el copyright.
Suscribirse a:
Enviar comentarios (Atom)
Blog Flux
Entradas
0 comentarios: