Udtrykke det

CSS afsluttet 10 års eksistens i år! De, der har eksisteret i et stykke tid, tjener deres brød (eller ej) bruger CSS, så er du måske klar over, hvordan vi har sulten for et godt udvalg af skrifttyper. Selv med manglende skrifttyper designere som dem på CSS Zen Garden har gjort brug af CSS baggrundsbilleder til at erstatte skrifttyper i jagten på at gøre nogen ret til deres designs. Vi har også prøvet Flash / JavaScript ® hacks til at nå vores design mål. På ingen måde det er en forkert måde at få de skrifttyper, vi ønsker i vores web-design, men bestemt, det er ikke den mest ønskelige måde. og over årene webdesigner, ligesom mig, er helt pålidelig på ti eller deromkring skrifttyper til deres design.

Den seneste udvikling inden for web-standarder og skrifttypeformater gør det muligt at gøre HTML-tekst i skrifttyper andre end de samme gamle standardskrifttyper. Leveres i "@ fontface" CSS decleration.

@ Fontface provids en løsning til at linke til den faktiske skrifttype fil og hente den fra internettet. Brug @ fontface, kan designere bruge skrifttyper uden at skulle fryse teksten som baggrundsbilleder. Gennemførelsen er meget ligetil, som vist nedenfor, men som alle gode ting har en CON del heraf, ikke alle browsere understøtter en enkelt "skrifttype". Hvis du planlægger at bruge @ fontface i stedet med krav om cross browser-understøttelse, så bliver du nødt til at give kilder til forskellige font-typer af samme.

1. TrueType - Et format designet til at se godt ud på skærmen. Anbefales især til Windows browsere (Chrome).
2. OpenType (CFF) - Dette format er bedre for print arbejde og ikke altid ser godt ud på Windows.
3. EOT - Du skal bruge dette format, hvis du ønsker at målrette Internet Explorer. IE vil ikke bruge noget andet format. Vores EOT s ville blive betragtet som "Lite", da de hverken er komprimeret eller domæne-begrænset.
4. SVG - Dette er et XML format, der understøttes af nogle browsere, herunder iPhone.
5. WOFF - Denne cross-browser, web-only font format er let (skrifttyper data er zip komprimeret) og kan kompileres med enten TrueType eller PostScript (CFF) beskriver. Det er i øjeblikket understøttes af Firefox 3.6 +.

Brug @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular ';
 src: url ('CalligraphyFLF.eot');
 src: lokalt ('CalligraphyFLF'), lokal ('CalligraphyFLF'), url ('CalligraphyFLF.woff') format ('WOFF'), url ('CalligraphyFLF.ttf') format ('TrueType'), url ('CalligraphyFLF . svg # CalligraphyFLF ') format ("SVG');
 }
 @ Font-face {
   font-family: "Din skrifttype";
   src: url ("fonts / font_filename.eot");
   src: lokalt ("Alternativ navn"), lokal ("Alternatename"),
     url ("fonts / font_filename.woff") format ("WOFF"),
     url ("fonts / font_filename.otf") format ("OpenType"),
     url ("skrifttyper / font_filename.svg # font_filename") format ("SVG");
   }
 H2 {font-family: "Din skrifttype", Georgien, Serif;} 

Som du kan se af ovenstående eksempel, til også at omfatte den valgte skrifttype, må man linke til et sæt af fonttypes for den samme skrifttype. Derfor folk henvise til det som "Font Kit".
Der er Font Kits til rådighed, der tillader udtrykkeligt forbinder med CSS @ font-face ejendom, den i henhold til End User License Agreement (EULA).

Nyttige WebFont Ressourcer:

• Skrifttyper til rådighed for @ font-face integrering wiki side på http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Han er en berømt font designer, der har gjort hundredvis af interessante TrueType frit til rådighed til brug på internettet. Hans skrifter er elegante, dekorative, og legende.
• Dieter Steffmann er en anden stor font designer. Han har også lavet mange flotte skrifttyper til rådighed for alle at bruge.
• Font shop : tilbyder skrifttyper er designet specielt til web brug. Mere end 30 af de mest succesfulde FontFont familier er nu tilgængelig som web FontFonts. FontShop har også en detaljeret WebFont brugervejledning http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Squirrel : Showcases alle de skrifttyper, der Skrifttype Squirrel tilbyder til brug med @ font-face CSS indlejring. Font Squirrel tilbyder en imponerende mængde af type, gør det døde nemt at vælge en ud, og behændigt tilbyder "kits" - den skrifttype af dit valg, i flere formater, pakket med demo HTML & CSS, der bruger meget strøm @ font-face syntaks . De tilbyder også en måde at lave dine egne @ font-face kits . Hvis den skrifttype du vil bruge er licenseret korrekt (dem, der leveres sammen med computeren, er ikke nødvendigvis i orden), generatoren producerer EOT, SVG, og hey! WOFF filer.

Med min begrænsede færdigheder-sæt med værktøjer som Photoshop og Illustrator, kan jeg ærligt indrømme, at jeg er bedre udvikler end jeg er en designer. Men min baggrund med kerne (server side) udvikling med Java / PHP / COBOL, har været en meget positiv indflydelse på mine UI udviklingskompetencer. Hvad jeg mener er, og samtidig skabe mine designs, dvs når jeg laver design, tænker jeg, hvordan design kan bedst omdannes til HTML-CSS og samtidig gøre HTML-CSS, giver jeg en tanke om backend teknologi og gøre rimeligt sikker at HTML let kan implementeres i XSL loops eller PHP snippets osv.

Over årene har jeg været kastet hovedet på design af UI designere, som formentlig donot har en anelse om, hvad HTML eller CSS er. Alle disse år har jeg tænkt at jeg ville bede om for meget, hvis jeg bare forventer, at designeren, der forsøger at shov hans "umuligt at kode" design ned i min hals, for at forstå bare en lille smule, hvad hans design ville blive konverteret til. Det ville hjælpe ret?

Så faldt jeg over dette indlæg i dag ... webdesignere, der ikke kan kode ... Tak Herre! Jeg er bare en af ​​mange, der føler det samme ... Ovenstående artitle er en smule lang forpustet .. men værd at læse, hvert eneste ord af det.

Thanks Elliot Jay Aktier ... jeg føler mig lettet!

Her er nogle uddrag fra Elliots artiklen .

Wow, sikke en dag! Det startede med en lille tweet og sluttede med en diskussion, der syntes at feje hele web design-community. Det ser ud til der er nogle meget stærke holdninger om emnet, om web-designere bør være i stand til at kode.
...
Så før vi komme ind på dette, lad mig hurtigt opsummere, hvad jeg sagde i morges på Twitter:

Helt ærligt, jeg chokeret over, at i 2010 jeg stadig kommer på Tværs 'web-designere', der ikke kan kode deres egne designs. Ingen undskyldning.

... Jeg skulle have været lidt mere specifik i mit tweet. Jeg talte om designere, der ikke har selv de mest grundlæggende HTML og CSS færdigheder til at slå et fladt design til en egentlig hjemmeside. Ikke folk, der bevidst vælger ikke at koden; dem, der ikke kan. Og jeg også kun at henvise til front-end kode her, selvfølgelig er det latterligt at tro, at designere bør også være fantastiske back-end-programmører ...

Vi får 'web' design sendt i Illustrator, 300dpi, umulige at kode, ingen konsistens / usability.
~ Amy Mahon

Det bliver sent, og jeg har fået at pakke dette op en eller anden måde. Jeg ved, at der vil være mange der er uenige med mig, og min hensigt er ikke at fornærme eller forstyrre nogen, der ikke kan kode, men jeg håber, at noget af det jeg har sagt afspejler nogle af de punkter, der altid kommer op, når dykke ned i denne debat.

I slutningen af ​​dagen, kan jeg ikke miste noget søvn over, hvem der kan kode, og der ikke kan. Jeg er bare virkelig overrasket over at finde så mange designere, der mangler frontend-færdigheder, som jeg troede det var en saga blot.

Læs også kommentarerne, der var omkring 320 kommentarer, som jeg skriver ... de er værd at læse.
Læs Elliots hele indlægget her .. webdesignere, der ikke kan kode

Da radio-knappen og teksten er inline, så teksten vil bringe sig i bunden af ​​radio knappen, vil teksten synes at være lidt under radioknappen.
Hvis du ønsker disse for at tilpasse til toppen, er du nødt til at placere radioen og teksten i separate beholdere som divs eller spænder over (efter behov), og de vil tage sig af justeringen. Det ville være nemmere at bruge tabelceller også af dit design kort tillader det.

Dette vil ikke se det samme i alle browsere, som alle browsere viser radioer lidt anderledes, så der altid kommer til at blive størrelse spørgsmål uanset hvad du gør.