Expresando TI

CSS completado 10 años de existencia este año! Los que han estado alrededor por un tiempo, ganarse el pan (o no) el uso de CSS, entonces usted puede conocer la forma en que se han muerto de hambre de una buena selección de fuentes. A pesar de la falta de fuentes de diseñadores como los de CSS Zen Garden han hecho uso de imágenes de fondo CSS para reemplazar las fuentes en la búsqueda de hacer algo de justicia a sus designios. También hemos tratado de Flash / JavaScript hacks ® para lograr nuestros objetivos de diseño. De ninguna manera este es un camino equivocado para conseguir las fuentes que deseamos en nuestros diseños web, pero definitivamente, no es la manera más conveniente. y el diseñador de páginas web en años, como yo, plenamente confiado en una decena de tipos de letra para sus diseños.

Los acontecimientos recientes en los estándares web y los formatos de fuente que sea posible, para representar el texto HTML en otros tipos de letra de las fuentes predeterminadas de siempre. Viene en el "@ tipo de fuente" decleration CSS.

@ Fontface provids una solución para enlazar con el archivo real de la fuente y recuperar desde la web. El uso de @ tipo de fuente, los diseñadores pueden utilizar fuentes sin tener que congelar el texto como imágenes de fondo. La aplicación es muy sencilla, como se muestra a continuación, pero como todas las cosas buenas tienen un papel CON para, no todos los navegadores son compatibles con un solo "tipo de fuente". Si usted está planeando utilizar fontface @ en el sitio con el apoyo que requiere navegador de la Cruz, entonces usted tendrá que proporcionar fuentes de diversos tipos de fuentes de la misma.

1. TrueType - Es un formato diseñado para verse bien en pantalla. Recomendado especialmente para los navegadores de Windows (Chrome).
2. OpenType (CFF) - Este formato es mejor para el trabajo de impresión y no siempre se ven bien en Windows.
3. EOT - Usted necesita este formato si desea orientar su campaña de Internet Explorer. IE no va a usar cualquier otro formato. El EOT se considera "Lite", ya que no son ni comprimido ni de dominio restringido.
4. SVG - Este es un formato XML compatible con algunos exploradores, incluyendo el iPhone.
5. WOFF - Este cross-browser, sólo por Internet formato de la fuente es de peso ligero (datos de la fuente es comprimido zip) y puede ser compilado con TrueType o PostScript describe (CFF). En la actualidad está soportado por Firefox 3.6 +.

El uso de @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular ';
 src: url ('CalligraphyFLF.eot');
 src: local ("CalligraphyFLF '), locales (" CalligraphyFLF'), url ('CalligraphyFLF.woff') formato ('WOFF'), url ('CalligraphyFLF.ttf') formato ('truetype'), url ('CalligraphyFLF . svg # CalligraphyFLF ') formato (' svg ');
 }
 @ Font-face {
   font-family: "Su tipo de letra";
   src: url ("fonts / font_filename.eot");
   src: local ("nombre alternativo"), locales ("Alternatename"),
     url ("fonts / font_filename.woff") en formato ("WOFF"),
     url ("fonts / font_filename.otf") en formato ("OpenType"),
     url ("fonts / font_filename.svg font_filename #") en formato ("SVG");
   }
 h2 {font-family: "Su tipo de letra", Georgia, serif;} 

Como se puede ver en el ejemplo anterior, para incluir el tipo de letra elegido, uno tiene que vincular a un conjunto de fonttypes para el mismo tipo de letra. Por lo tanto la gente se refiere a ella como "Kit de Fuentes".
Hay kits disponibles de fuentes que explícitamente permite la vinculación con la CSS @ font-face la propiedad en virtud del Contrato de Licencia de Usuario Final (EULA).

Recursos útiles WebFont:

• Las fuentes disponibles para @ font-face incrustación de la página wiki en http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Él es un diseñador de la fuente de renombre que ha realizado cientos de interesantes fuentes TrueType libremente disponibles para su uso en la web. Sus fuentes son elegantes, decorativas, y juguetón.
• Dieter Steffmann es otro gran diseñador de la fuente. Él también ha hecho muchas fuentes hermosas disponibles para que cualquiera lo use.
• Tienda de Fuente : ofrece fuentes diseñadas específicamente para uso en la web. Más de 30 de las familias FontFont más exitosos están ahora disponibles como FontFonts Web. FontShop también tiene un usuario detallada guía de WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Ardilla Fuente : Exhibe todas las fuentes que la ardilla fuente ofrece para su uso con @ font-face incrustación de CSS. Ardilla Fuente ofrece una cantidad impresionante de tipo, hace que sea fácil de muertos elegir uno, ya mano ofrece "kits" - el tipo de letra de su elección, en varios formatos, que vienen con demostración de HTML y CSS que usa muy actual @ font-face la sintaxis . Ellos también ofrecen una manera de hacer sus propias @ font-face kits . Si el tipo de letra que desea utilizar tiene licencia apropiada (los que vienen con la computadora no son necesariamente bien), el generador produce EOT, SVG, y hey! Archivos WOFF.

Con mi limitado conjunto de habilidades con herramientas como Photoshop e Illustrator, honestamente puedo confesar que soy un desarrollador mejor que yo soy un diseñador. Pero mi experiencia con el núcleo (del lado del servidor) de desarrollo con Java / PHP / COBOL, ha sido una influencia muy positiva en mis habilidades de desarrollo de interfaz de usuario. Lo que quiero decir es, al mismo tiempo la creación de mis diseños, es decir, cada vez que hago el diseño, pienso en cómo el diseño puede ser la mejor convertida en HTML-CSS y mientras se hace el código HTML, CSS, le doy un pensamiento acerca de la tecnología back-end y hacer razonablemente seguro que el HTML se puede implementar fácilmente en el XSL bucles o fragmentos de código PHP, etc

En los últimos años, he sido arrojado a la cabeza en los diseños de los diseñadores de la interfaz de usuario que probablemente donot tienen ni idea de lo que es HTML o CSS. Todos estos años he estado pensando que iba a pedir demasiado, si tan sólo esperan que el diseñador, que está tratando de shov su "imposible de código de" diseño por mi garganta, para entender un poco lo que su diseño se convertiría en. Eso ayudaría a la derecha?

Entonces, me encontré con este post de hoy ... los diseñadores web que no se puede codificar ... Gracias Señor! Yo soy sólo uno de muchos que sienten lo mismo ... El artitle anterior es un poco un largo aliento .. pero vale la pena la lectura, cada palabra de ella.

Gracias Elliot Jay Stocks ... Me siento aliviada!

Aquí hay algunos extractos de artículo de Elliot .

Wow, qué día! Todo comenzó con un tweet poco y terminó con una discusión que parecía extenderse por toda la comunidad de diseño web entera. Al parecer, hay algunas opiniones muy fuertes celebradas sobre el tema de si los diseñadores web deberían ser capaces de código.
...
Por lo tanto, antes de entrar en esto, permítanme recapitular rápidamente lo que he dicho esta mañana en Twitter:

Honestamente, estoy sorprendido de que en 2010 todavía estoy cruzando los diseñadores de páginas web de los que no se puede codificar sus propios diseños. No hay excusa.

... Que debería haber sido un poco más específico en mi tweet. Yo estaba hablando de los diseñadores que no tienen ni el más básico de HTML y CSS habilidades para convertir un diseño plano en un sitio real. No es la gente que intencionalmente no opten por el código, los que no se puede. Y también me refiero sólo al código de front-end de aquí, por supuesto, es ridículo pensar que los diseñadores también deben ser increíbles back-end de los programadores ...

Nos 'web' diseños enviados en Illustrator, 300dpi, imposibles de código, sin consistencia / facilidad de uso.
~ Amy Mahón

Se está haciendo tarde y tengo que terminar con esto de alguna manera. Sé que habrá muchos que no están de acuerdo conmigo, y mi intención no es ofender ni molestar a nadie que no puede codificar, pero espero que algo de lo que he dicho refleja algunos de los puntos que siempre surgen cuando ahondar en este debate.

Al final del día, no me quita el sueño, que puede codificar y quién no. Estoy realmente sorprendido de encontrar tantos diseñadores que carecen de las habilidades de front-end, como yo pensaba que esto era una cosa del pasado.

También lea los comentarios, hubo alrededor de 320 comentarios, mientras escribo ... que vale la pena una lectura.
Por favor, leer el post completo aquí .. Elliot diseñadores web que no se puede codificar

Desde el botón y el texto están en línea, por lo que el texto se alineará a la parte inferior del botón de opción, el texto del que parecen estar ligeramente por debajo del botón de radio.
Si usted quisiera que éstos se alinean con la parte superior, tendrá que poner la radio y el texto en contenedores separados, como divs o vanos (según corresponda) y que se hará cargo de la alineación. Sería más fácil de usar celdas de la tabla también, de su informe de diseño lo permite.

Esto no tendrá el mismo aspecto en todos los navegadores, ya que cada navegador muestra las radios de forma ligeramente diferente, por lo que siempre va a haber problemas de tamaño no importa lo que haces.