Nicfont es un proyecto que aprovecha las virtudes de font-face y CSS3 para optimizar la forma de mostrar un mapa departamental de Nicaragua.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
font
svg
README.md
demo.html
license

README.md

Nicfont

Nicfont es un proyecto que aprovecha las virtudes de font-face y CSS3 para optimizar la forma de mostrar un mapa departamental de Nicaragua. Nicfont es una tipografía en donde cada letra representa el area vectorial de un departamento, de esta forma el area del mapa puede ser escalada a cualquier tamaño sin perder la calidad del gráfico.

Encuentra el demo en Nicfont

¿Cómo Funciona? Se ha creado una tipografia nicfont-webfont.ttf en donde se asigno a cada letra de la "a" a la "q" con un departamento del Nicaragua. Cada área de departamento esta ubicada de forma relativa con respecto a las otros depatamentos, de tal forma que al crear una secuencia de letras los departamentos se dibujan de forma solapada en una misma área.

¿Cómo usarla? Basicamente se debe importar el archivo de estilo nicfont.css y usar la siguiente estructura HTML:

<!-- Incluir dentro de la tag <head> -->
<link rel="stylesheet" href="css/nicfont.css">

<!-- Dentro del <body> -->
<ul class="nicfont"> 
  <li id="raan"></li>
  <li id="raas"></li>   
  <li id="rio-san-juan"></li>
  <li id="chontales"></li>
  <li id="boaco"></li>
  <li id="matagalpa"></li>
  <li id="jinotega"></li>
  <li id="esteli"></li>
  <li id="madriz"></li>
  <li id="nueva-segovia"></li>
  <li id="chinandega"></li>
  <li id="leon"></li>
  <li id="managua"></li>
  <li id="masaya"></li>
  <li id="carazo"></li>
  <li id="granada"></li>
  <li id="rivas"></li>
</ul>

Demo

http://byroncorrales.github.com/nicfont/

Recursos

Free Online Font Converter - Convertir SVG to TTF

Font Squirrel - Convertir TTF a web fonts

Intridea Blog: How to Make Your Own Symbol Font - Buen lugar para iniciar.

Créditos

Creado por Byron Corrales basado en Stately

Byron Corralestwitter website

Licencia

MIT License. See LICENSE for details.

Copyright

Copyright (c) 2013 Byron Corrales.