Diferencias

Muestra las diferencias entre dos versiones de la página.


desarrollo:24_theme:tipografia-24 [2012/05/26 10:52] (actual) – creado - editor externo 127.0.0.1
Línea 1: Línea 1:
 +==== Ajustes de Visualización para el Reloj 24====
 +
 +^  Volver a [[.:]]  ^
 +
 +=== Tipografía ===
 +
 +<note warning>
 +Chequea las licencias de las fuentes aquí enlazadas antes de utilizarlas.
 +
 +Aunque he chequeado aquellas que son de libre uso a la fecha de ''2008-06-01'', no puedo garantizar que lo sigan siendo a futuro.
 +</note>
 +
 +Cada fuente está acompañada del vínculo, el nombre de familia y el nombre genérico. El nombre genérico es el nombre por el cual debes referirte a esta fuente si vas a utilizar el método de [[.:reloj-24-web#Método sIFR|sIFR (Flash Text)]]; el nombre de familia es por el cual debes referire a e instalar la fuente si vas a utilizar el método de [[.:reloj-24-web#Método CSS|CSS font-face]].
 +
 +
 +^ Fuente y Muestra        |  Licencia          | Familia y Nombre  |
 +| [[http://www.twyman.org.uk/Fonts/|Harvey Twyman's "World's Simplest Font"]] --- ''7segments-ttf'' ([color=orange]¡RECOMENDADO![/color])   | [u]Excempto de Copyright[/u]  | N/A  |
 +| [[http://www.spinwardstars.com/scrfonts/lcd.html|LCD (Spinward)]] --- ''lcd-*.ttf'' Family   | Freeware  | →Familia: "lcd"\\ →Nombre: "Regular"  |
 +| [[http://desktoppub.about.com/library/fonts/dd/uc_digitalreadout.htm|Digital Readout]]  --- ''Digital Readout'' (altamente aceptable)   | Libre para uso personal((acorde a declaración en el sitio))  | →Familia: "Digital Readout" (exacto)  |
 +| [[http://www.fontstock.net/7532/Transistor-Regular.html|Transistor (Free Fonts)]] --- ''transistor.ttf''          | Freeware           | →Familia: "Transistor"\\ →Nombre:"Regular"  |
 +| [[http://www.urwpp.de/cgi-bin1/dalcgi/source/schnellsuche.htd?searchchar=lcd| LCD (URW Software)]]  | **Shareware**, aprox. ''30€''  | N/A |
 +| [[http://www.fontshop.com/fonts/singles/elsner_flake/lcd/| LCD (Elsner)]]  | **Shareware**, aprox. ''30€''  | →Familia: "LCD" (asi con mayúsculas). Al parecer es la fuente __oficial de la serie__(([[http://www.panopticist.com/]])).  |
 +
 +La fuente que yo estoy usando en los ejemplos es LCD Family, por la exactitud de la visualización.
 +
 +En general para lograr el efecto puedes usar una de estas fuentes, o cualquier otra fuente de reloj digital, provisto que cumpla con las siguientes condiciones:
 +
 +  * debe ser **monoespaciada** (todos los caracteres usan el mismo espacio, como en //Courier//)
 + sin kerning.
 +  * o, alternativamente, ser una **fuente ajustada** (como lo es por ejemplo //Gentium//) sin serif y con kerning.
 +  * claro está, los números //deben parecer de matriz de siete segmentos//.
 +
 +Parece complicado, pero no lo es. En lenguaje //humano// lo que estoy tratando de decir es que, o todos los caracteres usan el mismo espacio como en un LED físico de 7 segmentos, o que aquellos caracteres que usan menos espacio (el "1" y el "7") no se autoajustan al caracter anterior por un espacio mayor al que sería "medio" segmento de LED.
 +
 +=== Color ===
 +
 +Para lograr el efecto como el que se ve abajo, puedes utilizar un esquema de colores como el siguiente (pasa los códigos de color directo a CSS, o usa el selector de colores de Windows para seleccionar el color exacto):
 +
 +  * **Color de frente**: ''#ff3e10'' (amarillo ligeramente vivo)
 +  * **Color de fondo**:  ''#333333'' (entre plomo y negro, tirando para negro)
 +  * **Color de sombreado**, esi está disponible: ''#f04444'' 
 +
 +== Demo ==
 +
 +<html><p style="margin:4px;"><span style="font-size:18pt;color:#fff310;background-color:#333333;text-shadow:1px 1px #f04444;">HH:MM:SS</span></p></html>
 +
 +=== Disposición del Objeto ===
 +
 +  * **Ancho mínimo del objeto**: el contenedor visual del reloj necesita un ancho mínimo de ''8 em'' de modo de contener perfectamente todos los digitos del display (seis dígitos y dos dos-puntos). 
 +  * **Tamaño de la tipografía**: en el caso de la fuente //Transistor// el tamaño recomendado es de 14 pt, en el caso de las fuentes de la familia //lcd// el tamaño recomendado es de 12 pt en peso negrita.
 + * **Alineación del texto**: centrado da el mejor efecto.
 +
 +
 +^  [[.:|Volver a Team24]]  ^
 +----
 +{{tag>ayuda 24 css}}