«
»

2012, css3, HTML5

html5 css3 fuentes para todos los navegadores

10.10.12 | Comment?

Alberto Suárez Pérez

Cada vez mas los navegadores son mas compatibles y nos dejan jugar un poco mas. En este caso no había aprovechado hasta ahora esta característica de css3, hasta esta tarde. Con esta regla de css3,font-face.com, puedes colocar las rutas de las fuentes. Para pasar a todos estos formatos la fuente tienes recursos como esta web: http://www.fontsquirrel.com/fontface/generator.

@font-face { font-family:'canarias';
  src:url('../css/font/sketch_block.eot');
  src:url('../css/font/sketch_block.eot?#iefix') format('eot'),
      url('../css/font/sketch_block.woff') format('woff'),
      url('../css/font/sketch_block.ttf') format('truetype'),
      url('../css/font/sketch_block.svg#id') format('svg');
  font-weight:normal; font-style:normal;



#texto{
	
	font-family:'canarias', Arial, Verdana, sans-serif;
	color:white;
	font-size:55px;
    
	}

Cito estos consejos de cristalab.com, la primera en particular me hace mucha gracia:

.eot siempre debe ir de primeras y siempre debe ir dos veces. Porque Internet Explorer 6, 7 y 8 son como un ex psicopata. Siempre quiere que le pongas de primeras ante el resto.

También recuerda que puedes agregar tantos @font-face como quieras. Simplemente declaras otro bloque @font-face y le pones otro font-family. Ya está.

Las fuentes SVG tienen un ID que debe ir frente a ellas con el signo #. Lo consigues abriendo el .svg con cualquier editor de texto y buscando el atributo «id».

Comments are closed.


«
»