Ga izražava

CSS završili 10 godina postojanja ove godine! Oni koji su oko za neko vrijeme, zarađivati ​​svoj kruh (ili ne) koristeći CSS, onda možda svjesni koliko smo natašte za dobar odabir fontova. Čak i uz nedostatak fontova dizajneri poput onih na CSS Zen Garden su koristili CSS pozadinske slike koja će zamijeniti fontove u potrazi za događaj neki pravdu svojim dizajnom. Također smo pokušali Flash / JavaScript ® hack kako bi se postigla svoje ciljeve dizajn. Nipošto to je pogrešan način da biste dobili fontove želimo na našim web dizajna, ali definitivno nije najpoželjniji način. i više godina, web dizajner, poput mene, u potpunosti su se oslonili na deset ili tako fontova za svojim dizajnom.

Nedavni događaji u web standarda i formata fonta bi bilo moguće donijeti HTML tekst u slogove drugih od istih starih zadanih fontova. Dolazi u "@ Font" CSS decleration.

@ Font provids rješenje za povezivanje sa stvarnim fonta datoteku i preuzimanje s weba. Korištenje mijenjate brzine Font, dizajneri mogu koristiti fontove bez zamrznuti tekst kao pozadinske slike. Provedba je vrlo ravno naprijed, kao što je prikazano u nastavku, ali i sve dobre stvari imaju CON dio njega, nisu svi preglednici podržavaju jednu "vrstu fonta". Ako planirate koristiti mijenjate brzine Font na stranice sa zahtijevaju križ preglednik podrška, onda ćete morati osigurati izvore na različite font-vrsta isto.

1. TrueType - format dizajniran da izgleda dobro na zaslonu. Preporuča posebno za Windows preglednika (Chrome).
2. OpenType (HNS) - Ovaj format je bolji za ispis rad i ne uvijek izgleda dobro na Windowsima.
3. EOT - Trebate ovaj format ako želite ciljati Internet Explorer. IE neće koristiti bilo koji drugi format. Naša EOT-a će se smatrati "Lite", jer niti su komprimirani niti domene ograničene.
4. SVG - Ovo je XML format podržan u nekim preglednicima, uključujući i iPhone.
5. WOFF - To cross-preglednik, web-samo font format je lagan (font podaci zip komprimirani) i može sastaviti sa bilo TrueType ili PostScript (HNS) obrise. Trenutno je podržan od strane Firefox 3.6 +.

Korištenje mijenjate brzine Font

  @ Font-face {
 font-family: "CalligraphyFLFRegular ';
 src: url ('CalligraphyFLF.eot');
 src: mjesni ('CalligraphyFLF'), lokalne ('CalligraphyFLF'), url ('CalligraphyFLF.woff') format ('woff'), url ('CalligraphyFLF.ttf') format ("TrueType"), url ('CalligraphyFLF . svg # CalligraphyFLF ') format ("svg');
 }
 @ Font-face {
   font-family: "Vaš tipografiju";
   src: url ("fontovi / font_filename.eot");
   src: mjesni ("Alternativni ime"), lokalne ("Alternatename"),
     url ("fontovi / font_filename.woff") format ("woff"),
     url ("fontovi / font_filename.otf") format ("OpenType"),
     url ("fontovi / font_filename.svg # font_filename") format ("SVG");
   }
 h2 {font-family: "Vaš tipografiju", Gruzija, serif;} 

Kao što možete vidjeti iz gornjeg primjera, da su izabrani slovima fonta, treba povezati skup fonttypes za isti slovima. Dakle ljudi nazivaju "Font Kit".
Postoje slova Kits na raspolaganju da se eksplicitno omogućuje povezivanje s CSS mijenjate brzine font-face imovine njemu pod End User License sporazuma (EULA).

Korisni WebFont Resursi:

• Fontovi dostupni za mijenjate brzine font-face ugradnje wiki stranice na http://webfonts.info/wiki/index.php?title=Main_Page~~pobj
  
• Ray Larabie . On je poznati font dizajner koji je napravio stotine zanimljivih TrueType fontova slobodno dostupnih za korištenje na webu. Njegovi fontovi su elegantni, dekorativni, i razigran.
• Dieter Steffmann je još jedan veliki font dizajner. On je, također, je napravio mnoge lijepe fontove na raspolaganju za bilo tko koristiti.
• Font trgovina : nudi fontove dizajnirana posebno za web uporabu. Više od 30 od najuspješnijih FontFont obitelji sada su dostupna kao web FontFonts. FontShop također ima detaljan WebFont korisnički vodič http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf~~dobj
  
• Font vjeverica : prikazuje sve fontove koji Font vjeverica nudi za korištenje sa @ font-face CSS ugradnje. Font vjeverica nudi impresivnu količinu tipa, čini mrtav jednostavna za jedan izabrati i hendikep nudi "setove" - ​​slovima po vašem izboru, u nekoliko formata, pakirani sa demo HTML i CSS da mijenjate brzine koristi vrlo trenutni font-face sintaksu . Oni također pružaju način da napravite svoj ​​vlastiti utisnite font-face setove . Ako tipografiju želite koristiti je licenciran treba (one koje dolaze s vašim računalom nisu nužno redu), generator proizvodi EOT i SVG i hej! WOFF datoteke.

S mojim ograničenim vještina skupa s alatima kao što su Photoshop i ilustrator, ja mogu iskreno priznati da sam bolji programer od mene dizajner. Ali moja pozadina s jezgrom (server side) razvoj s Java / PHP / COBOL, bio je vrlo pozitivan utjecaj na razvoj korisničkog sučelja svojim vještinama. Ono što hoću reći je, uz stvaranje moje dizajne, tj. kad god trebam učiniti dizajn, mislim o tome kako dizajn može se najbolje pretvoriti u HTML-CSS-a dok radi HTML-CSS, dajem misao o backend tehnologije i čine razumno sigurni da je HTML možete lako primijeniti u XSL petlje ili PHP isječke, itd.

Tijekom godina, ja sam bio bačen glavu na nacrtima UI dizajnera koji su vjerojatno donot imaju pojma što je HTML ili CSS. Sve ove godine sam razmišljao da ću tražiti previše, ako ja samo očekujem dizajner, koji pokušava shov njegov "nemoguće koda" dizajn niz moje grlo, shvatiti samo malo što je njegov dizajn bi se pretvoriti u. To bi pomoglo zar ne?

Zatim, JA je došao preko ovaj post danas ... web dizajnera koji ne mogu kod ... Hvala Gospodine! Ja sam samo jedan od mnogih koji se osjećaju isto ... iznad artitle je malo dugo daha .. ali vrijedan čitanja, svaka riječ o tome.

Hvala Elliotovih Jay dionice ... Osjećam olakšanje!

Ovdje je nekoliko izvadaka iz Elliots članka .

Wow, što je dan! Počelo je s jednim malim cvrkut, a završio s raspravom koja se činilo da pomete preko cijelog web dizajn zajednice. Čini se da su neki vrlo jaki mišljenja se drže na temu je li web dizajnera trebao biti u mogućnosti koda.
...
Dakle, prije nego što smo dobili u to, dopustite mi da brzo rekapitulacija onoga što sam rekao je jutros na Twitter:

Iskreno, ja sam šokiran da je u 2010 Ja sam još uvijek dolaze preko "Web dizajnera 'koji ne mogu kod svoje vlastite dizajne. Nema isprika.

Ja bi trebao ... bili malo precizniji u mom cvrkut. Ja sam govorio o dizajnera koji nemaju ni osnovne HTML i CSS vještine za uključivanje stan dizajn u stvarni stranice. Ne ljudi koji namjerno izabrati da ne, kod onih koji ne mogu. I ja sam također odnosi samo na front-end kod ovdje, naravno da je smiješno da mislim da dizajneri također bi trebali biti iznenađujuće back-end programera ...

Mi smo dobili 'dizajn Web je poslao u Illustrator, 300dpi, koje je nemoguće koda, ne dosljednost / upotrebljivosti.
~ Amy Mahon

To je sve kasno, a ja sam dobio da zamotate ovaj gore nekako. Znam da će mnogi koji se ne slažu sa mnom, a moja namjera nije uvrijediti ili uznemiriti nikoga tko ne može kod, ali nadam se da su neki od ono što sam rekao odražava neke od točaka koja uvijek dolaze kad delving ta rasprava.

Na kraju dana, ja ne izgubiti bilo koji spavaju oko toga tko može kodirati i koji ne mogu. Ja sam samo istinski iznenađen pronaći toliko dizajnere da nedostaju vještine front-end, kao što sam mislio da je to stvar prošlosti.

Također pročitajte komentare, bilo je oko 320 komentara, kao i pisati ... oni su vrijedan čitanje.
Molimo Vas pročitajte Elliots cijeli post ovdje .. Web dizajneri koji ne mogu kod

Budući da je radio gumb i tekst su u liniji, tako da tekst će se poravnati na dno radio gumb, tekst će se pojaviti biti malo pod radio gumb.
Ako želite to poravnati na vrhu, morat ćete staviti radio i tekst u zasebne kontejnere kao što divs ili premošćuje (prema potrebi) i oni će voditi brigu o usklađenosti. Bilo bi lakše koristiti tablice stanice previše, je vaš dizajn kratak to dopušta.

To neće izgledati isto u svakom browseru, kao i svaki preglednik prikazuje radio malo drugačije, tako da je uvijek će biti veličine problema bez obzira na to što radite.