Expressant TI

CSS completat 10 anys d'existència aquest any! Els que han estat voltant per un temps, guanyar-se el pa (o no) l'ús de CSS, llavors vostè pot conèixer la forma en què han mort de fam d'una bona selecció de fonts. Tot i la manca de fonts de dissenyadors com els de CSS Zen Garden han fet ús d'imatges de fons CSS per reemplaçar les fonts en la recerca de fer alguna cosa de justícia als seus designis. També hem tractat de Flash / JavaScript hacks ® per assolir els nostres objectius de disseny. De cap manera aquest és un camí equivocat per aconseguir les fonts que desitgem en els nostres dissenys web, però definitivament, no és la manera més convenient. i el dissenyador de pàgines web en anys, com jo, plenament confiat en una desena de tipus de lletra per als seus dissenys.

Els esdeveniments recents en els estàndards web i els formats de font que sigui possible, per representar el text HTML en altres tipus de lletra de les fonts predeterminades de sempre. Ve al "@ tipus de font" decleration CSS.

@ Fontface provids una solució per enllaçar amb l'arxiu real de la font i recuperar des de la web. L'ús de @ tipus de font, els dissenyadors poden utilitzar fonts sense haver de congelar el text com imatges de fons. L'aplicació és molt senzilla, com es mostra a continuació, però com totes les coses bones tenen un paper AMB per, no tots els navegadors són compatibles amb un sol "tipus de font". Si vostè està planejant utilitzar fontface @ en el lloc amb el suport que requereix navegador de la Creu, llavors vostè haurà de proporcionar fonts de diversos tipus de fonts de la mateixa.

1. TrueType - És un format dissenyat per veure bé en pantalla. Recomanat especialment per als navegadors de Windows (Chrome).
2. OpenType (CFF) - Aquest format és millor per al treball d'impressió i no sempre es veuen bé en Windows.
3. EOT - Vostè necessita aquest format si voleu orientar la seva campanya d'Internet Explorer. IE no va a usar qualsevol altre format. El EOT es considera "Lite", ja que no són ni comprimit ni de domini restringit.
4. SVG - Aquest és un format XML compatible amb alguns exploradors, incloent l'iPhone.
5. Woff - Aquest cross-browser, només per Internet format de la font és de pes lleuger (dades de la font és comprimit zip) i pot ser compilat amb TrueType o PostScript descriu (CFF). En l'actualitat funciona amb Firefox 3.6 +.

L'ús de @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular ';
 src: url ('CalligraphyFLF.eot');
 src: local ("CalligraphyFLF '), locals (" CalligraphyFLF'), adreça ('CalligraphyFLF.woff') format ('Woff'), adreça ('CalligraphyFLF.ttf') format ('truetype'), adreça ('CalligraphyFLF . svg # CalligraphyFLF ') format (' svg ');
 }
 @ Font-face {
   font-family: "El seu tipus de lletra";
   src: url ("fonts / font_filename.eot");
   src: local ("nom alternatiu"), locals ("Alternatename"),
     adreça ("fonts / font_filename.woff") en format ("Woff"),
     adreça ("fonts / font_filename.otf") en format ("OpenType"),
     adreça ("fonts / font_filename.svg font_filename #") en format ("SVG");
   }
 h2 {font-family: "El seu tipus de lletra", Geòrgia, serif;} 

Com es pot veure en l'exemple anterior, per incloure el tipus de lletra escollit, un ha de vincular a un conjunt de fonttypes per al mateix tipus de lletra. Per tant la gent es refereix com "Kit de Fonts".
Hi ha kits disponibles de fonts que explícitament permet la vinculació amb la CSS @ font-face la propietat en virtut del Contracte de Llicència d'Usuari Final (EULA).

Recursos útils WebFont:

• Les fonts disponibles per @ font-face incrustació de la pàgina wiki en http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Ell és un dissenyador de la font de renom que ha realitzat centenars d'interessants fonts TrueType lliure disponibilitat per al seu ús a la web. Les seves fonts són elegants, decoratives, i juganer.
• Dieter Steffmann és un altre gran dissenyador de la font. Ell també ha fet moltes fonts boniques disponibles perquè qualsevol el faci servir.
• Botiga de Font : ofereix fonts dissenyades específicament per a ús a la web. Més de 30 de les famílies FontFont més reeixits estan ara disponibles com FontFonts web. FontShop també té un usuari detallada guia d'WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Esquirol Font : Exhibeix totes les fonts que l'esquirol font ofereix per funcionar amb @ font-face incrustació de CSS. Esquirol Font ofereix una quantitat impressionant de tipus, fa que sigui fàcil de morts triar un, ia mà ofereix "kits" - el tipus de lletra de la seva elecció, en diversos formats, que vénen amb demostració d'HTML i CSS que utilitza molt actual @ font-face la sintaxi . Ells també ofereixen una manera de fer les seves pròpies @ font-face kits . Si el tipus de lletra que voleu utilitzar té llicència corresponent (els que vénen amb l'ordinador no són necessàriament bé), el generador produeix EOT, SVG, i ei! Arxius Woff.

Amb el meu limitat conjunt d'habilitats amb eines com Photoshop i Illustrator, honestament puc confessar que sóc un desenvolupador millor que jo sóc un dissenyador. Però la meva experiència amb el nucli (del costat del servidor) de desenvolupament amb Java / PHP / COBOL, ha estat una influència molt positiva en les meves habilitats de desenvolupament d'interfície d'usuari. El que vull dir és, al mateix temps la creació dels meus dissenys, és a dir, cada vegada que faig el disseny, penso en com el disseny pot ser la millor convertida en HTML-CSS i mentre es fa el codi HTML, CSS, li dono un pensament sobre la tecnologia back-end i fer raonablement segur que l'HTML es pot implementar fàcilment en el XSL bucles o fragments de codi PHP, etc

En els darrers anys, he estat llançat al capdavant en els dissenys dels dissenyadors de la interfície d'usuari que probablement donot tenen ni idea del que és HTML o CSS. Tots aquests anys he estat pensant que anava a demanar massa, si tan sols esperen que el dissenyador, que està tractant de shov seu "impossible de codi de" disseny per la meva gola, per entendre una mica el que el seu disseny es convertiria en. Això ajudaria a la dreta?

Llavors, em vaig trobar amb aquest post d'avui ... els dissenyadors web que no es pot codificar ... Gràcies Senyor! Jo sóc només un de molts que senten el mateix ... El artitle anterior és una mica un llarg alè .. però val la pena la lectura, cada paraula d'ella.

Gràcies Elliot Jay Estocs ... Em sento alleujada!

Aquí hi ha alguns extractes de article d'Elliot .

Wow, quin dia! Tot va començar amb un tweet poc i va acabar amb una discussió que semblava estendre per tota la comunitat de disseny web sencera. Pel que sembla, hi ha algunes opinions molt fortes celebrades sobre el tema de si els dissenyadors web haurien de ser capaços de codi.
...
Per tant, abans d'entrar en això, permetin-me recapitular ràpidament el que he dit aquest matí a Twitter:

Honestament, estic sorprès que el 2010 encara estic creuant els dissenyadors de pàgines web dels que no es pot codificar els seus propis dissenys. No hi ha excusa.

... Que hauria d'haver estat una mica més específic en el meu tweet. Jo estava parlant dels dissenyadors que no tenen ni el més bàsic d'HTML i CSS habilitats per a convertir un disseny pla en un lloc real. No és la gent que intencionalment no optin pel codi, els que no es pot. I també em refereixo només al codi de front-end d'aquí, per descomptat, és ridícul pensar que els dissenyadors també han de ser increïbles back-end dels programadors ...

Ens 'web' dissenys enviats a Illustrator, 300dpi, impossibles de codi, sense consistència / facilitat d'ús.
~ Amy Maó

S'està fent tard i he d'acabar amb això d'alguna manera. Sé que hi haurà molts que no estan d'acord amb mi, i la meva intenció no és ofendre ni molestar a ningú que no pot codificar, però espero que alguna cosa del que he dit reflecteix alguns dels punts que sempre sorgeixen quan aprofundir en aquest debat.

Al final del dia, no em treu la son, que pot codificar i qui no. Estic realment sorprès de trobar tants dissenyadors que no tenen les habilitats de front-end, com jo pensava que això era una cosa del passat.

També llegeixi els comentaris, hi va haver al voltant de 320 comentaris, mentre escric ... que val la pena una lectura.
Si us plau, llegir el post complet aquí .. Elliot dissenyadors web que no es pot codificar

Des del botó i el text estan en línia, de manera que el text s'alinearà a la part inferior del botó d'opció, el text del qual semblen estar lleugerament per sota del botó de ràdio.
Si li agradaria que aquests s'alineen amb la part superior, haurà de posar la ràdio i el text en contenidors separats, com divs o obertures (segons correspongui) i que es farà càrrec de l'alineació. Seria més fàcil d'utilitzar cel · les de la taula també, del seu informe de disseny ho permet.

Això no tindrà el mateix aspecte en tots els navegadors, ja que cada navegador mostra les ràdios de forma lleugerament diferent, pel que sempre hi haurà problemes de mida no importa el que fas.