El documento explica el uso de la regla @font-face en CSS para incorporar fuentes personalizadas en páginas web. Describe cómo @font-face permite especificar la ruta a archivos de fuentes para superar la limitación de depender de las fuentes del usuario. También cubre formatos comunes de fuentes como TTF, WOFF y EOT, y recomienda usar varios formatos para garantizar compatibilidad con todos los navegadores.

2. CSS
Texto y Tipografía

3.  Las dificultades que históricamente han
existido en relación al uso de tipos de letra
en páginas web se debía principalmente, a
que los navegadores se venían basando en un
archivo de fuente instalada en el propio
ordenador del usuario y no se podía
garantizar que el usuario tuviera disponible la
fuente que especificaba el programador o
diseñador.

4.  Para superar la limitación de tener que depender de las
fuentes disponibles por parte de cada usuario se creó la
regla @font-face que permite especificar un nombre y la
localización (url) de un archivo con la fuente que se desea
usar en una página web.
 De esta manera, cambia el concepto tradicional, ya que
con @font-face podremos usar fuentes que hemos
definido y localizado nosotros mismos, sin depender de
las fuentes de que disponga el usuario.
 Ten en cuenta que @font-face está disponible en todos los
navegadores modernos, pero que versiones antiguas de
navegadores no admiten el uso de esta regla, de ahí que
siempre debamos especificar una familia tipográfica
genérica como alternativa de seguridad para el caso de
que una fuente especificada no pueda cargarse.

5.  Una fuente es un archivo informático con la
información necesaria para que un sistema
operativo o programa puede mostrar un tipo de
letra determinado.
 Por ejemplo, en Windows se dispone de la fuente
“Arial” gracias a que dentro del sistema de
archivos existe un archivo denominado arial.ttf.
Si borramos ese archivo, la fuente deja de estar
disponible. El tipo (formato o extensión) del
archivo puede variar de unos sistemas a otros:
extensiones habituales son ttf, otf, woff, svg, etc.

6.  La extensión woff (Web Open Font Format) ha sido creada
específicamente como tipo de fuente para desarrollos web y
aspira a convertirse en un estándar. Sin embargo, la realidad es
que no existe todavía un formato de archivo estándar que se
haya impuesto para todos los navegadores.
 El uso básico de la regla @font-face conlleva definir dos
parámetros: por un lado, el “alias” o nombre con el que vamos a
designar a la fuente cuando la empleemos en nuestras reglas
CSS. Por otro lado, la ruta donde se localiza el archivo que
contiene la fuente.
La sintaxis básica a emplear es de este tipo:
@font-face
{font-family: "nombreDeFuente";
src: url(nombreDeArchivo.extension);
}

7.  Debido a que la regla @font-face se ha ido introduciendo
en los últimos años y los diferentes navegadores han ido
admitiendo formatos de fuentes distintos poco a poco, un
“truco” al que recurren muchos diseñadores y
programadores para garantizar que la mayor parte de
navegadores usen la fuente deseada es especificar las
rutas de los archivos fuente en distintos formatos, de
modo que se usará el primero en ser reconocido por el
navegador.
Ejemplo
@font-face
{ font-family: Sansat;
src: url('Sansation_Light.woff'),
url('Sansation_Light.ttf'),
url('Sansation_Light.eot') ; }

8.  La regla @font-face permite que se especifique si
se debe buscar la fuente primero en el ordenador
del usuario y usarla en caso de estar disponible,
antes que usar una fuente especificada mediante
un archivo. Para ello se especifica el origen como
local(“nombreDeFuenteEnSistemaUsuario”).
 Ejemplo
@font-face
{ font-family: Sansat;
src: local(“Sansation Light”),
url('Sansation_Light.woff'),
url('Sansation_Light.ttf'),
url('Sansation_Light.eot') ; }

9.  Existen diferentes páginas web donde se
ofrecen archivos de fuentes gratuitos. Es
difícil decir cuál es la página que ofrece las
mejores fuentes, entre otras cosas porque en
estas páginas hay cambios continuos y se van
incorporando nuevas fuentes y nuevos
formatos continuamente.

10.  Muchas veces las fuentes que tenemos disponibles
para descarga están en un solo formato como ttf y
para asegurarnos de que se visualicen bien deseamos
disponer de ellas en varios formatos. Los formatos
más usados son: WOFF, EOT, TTF, OTF y SVG.. Hay
varios tipos de fuentes para web:
◦ woff - Web Open Font Format (.woff)
◦ truetype (.ttf)
◦ opentype (.otf)
◦ embedded-opentype (.eot)
◦ svg (.svg, .svgz)
 En principio usando TTF y EOT nos garantizamos que
nuestra fuente sea reconocida por la mayoría de los
navegadores, aunque si buscamos el máximo de
seguridad convendría incluir los cinco formatos.

12.  La regla @font-face se ha introducido en los últimos años
y su estandarización todavía no es suficiente, aunque su
uso es cada vez más amplio. Te podrás encontrar con
situaciones como que:
a) Un determinado navegador no reconozca la regla @font-
face, con lo cual recurrirá a la fuente estándar que hayas
definido, o si no la has definido, a la fuente por defecto.
b) Un determinado navegador no reconozca el formato de la
fuente que hayas indicado.
c) Un determinado navegador no responda bien a la sintaxis
que hemos descrito y sea necesario aplicar “un parche” o
código específico para ese navegador.
d) Algunas reglas CSS no se aplican bien con un
determinado formato de fuente. Por ejemplo, quizás te
encuentres que al aplicar text-transform: uppercase; con
algunas fuentes no te funcione.

13.  Los em son escalables mientras que los rem
apuntan directamente al tamaño del body.
Ejemplo
P{
font-size: 3em;
}

14.  Los valores para font-weight pueden ser 100, 200,
300, 400, 500, 600, 700, 800, normal, lighter, bold y
bolder.
 Las palabras reservadas tiene su equivalencia: normal
= 400, bold = 700, bolder = 900 y lighter = 100.
 El grosor de la fuente, también depende de la
configuración de la fuente seleccionada.
Ejemplo
P{
font-weight: normal;
}

15.  Los valores para font-style pueden ser
normal, italic u oblique.
Ejemplo
P{
font-style: normal;
}

16.  Los valores para text-align pueden ser left,
right, center o justif.
Ejemplo
P{
text-align : center;
}

17.  Interlineado de texto (espacio entre lineas)
Ejemplo
P{
line-height: normal; (valor por defecto)
}
P{
line-height: 40px;
}

18.  Los valores para text-decoration pueden ser
normal o none, underline, overline o line-
through.
Ejemplo
P{
text-decoration: none;
}
Las etiquetas a traen por defecto subrayado y
lo quitamos aplicando text-decoration: none;

19.  Los valores para text-transform pueden ser
capitalize, uppercase o lowercase.
Ejemplo
P{
text-transform : uppercase ;
}

20.  También podemos darle a font-variant el
valor small-caps
Ejemplo
P{
font-variant: small-caps;
}

21. Para lograr efecto de tabulacion, en los
parrafos, se utiliza la propiedad text-indent
Ejemplo
P{
text-indent: 50px;
}

22. Ejemplo
P{
letter-spacing: 50px; (mayor espacio entre
letras)
word-spacing: 15px; (mayor espacio entre
palabras)
}
P{
letter-spacing: -2px; (menor espacio entre letras)
word-spacing: -9px; (menor espacio entre
palabras)
}

23. CSS
Bordes

24.  Los tres atributos fundamentales para establecer
el borde a un elmento son:
border-width: indica la anchura del borde
border-style: indica el tipo del borde (solid, dashed,
double, dotted, inset, outset o none)
border-color: indica el color del borde
 Estos atributos pueden resumirse en una sola
linea con la estructura border: anchura estilo
color.
Ejemplo: border 2px solid red;
 Así mismo se puede aplicar a un borde concreto
con border-top-style o border-left-color, etc.

25.  Se puede establecer el radio de curbatura de
las esquinas de forma igualada, pero tambien
se pueden hacer curvaturas avanzadas
especificando en qué esquina se aplicarán y
cual será el radio en el eje X y en el eje Y para
aplicar el radio de la esquina.
 Código CSS
border-radius: 20px;
border-top-left-radius: 30px (radio horizontal)10px
(radio vertical)

26.  Usar una imagen como color de border.
Border-image:
url(../imagen.jpg)
20 (cantidad de px que deseo que se muestre
de la imagen seleccionada como border)
Repeat/stretch (comportamiento)
;
Border-width: 15px;

27. CSS
Fondos

28.  Para posicionar el fondo de un elemento
tenemos 3 opciones: border-box (desde el
borde), padding-box (desde la zona del
padding) y content-box (desde la zona del
contenido)
Ejemplo
Border 10px solid transparent;
Background: url(..0/imagen.jpg)
Background-origin: paddin-box/border-
box/content-box

29. Colocar varias imágenes de fondo.
Border: 10px solid black;
background-color: green;
background: url(..0/firma.gif),
url(..0/imagen.jpg);
Background-repeat: no-repeat, repeat;
Background-position: right-bottom, center
center;

30. Disposición de gradiente:
Left, right, top, bottom
Border: 10px solid black;
background-color: green;
Background: -moz-linear-gradient(left, black
0%, orange 20%, blue 80%, green 100%)
O
Left 40deg, right 30deg

31. Se agrega la nomenclatura de grados (deg)
Border: 10px solid black;
background-color: green;
Background: -moz-linear-gradient(left 30deg,
black 0%, orange 20%, blue 80%, green 100%)

33. background: red;
/*Safari*/
background: -webkit-repeating-linear-
gradient(red, yellow 10%, green 20%);
/*Opera*/
background: -o-repeating-linear-gradient(red,
yellow 10%, green 20%);
/*Firefox */
background: -moz-repeating-linear-
gradient(red, yellow 10%, green 20%);
/*Standard*/
background: repeating-linear-gradient(red,
yellow 10%, green 20%);

34. background: red;
/* Safari */
background: -webkit-radial-gradient(center,
circle, red, yellow, green);
/* Opera */
background: -o-radial-gradient(center, circle, red,
yellow, green);
/* Firefox */
background: -moz-radial-gradient(center, circle,
red, yellow, green);
/* Standard */
background: radial-gradient(center, circle, red,
yellow, green);

36. Emmanuel Ortiz
Consultor Sr.
emmanueltiz@gmail.com
email / gtalk
emmanueltiz
Skype