Ki ga izraža

CSS zaključil 10 let obstoja letos! Tisti, ki so bile približno za nekaj časa, zaslužil svoj kruh (ali ne) z uporabo CSS, potem ste morda zaveda, kako smo bili lačni za dobro izbiro pisave. Tudi s pomanjkanjem pisave oblikovalci, kot so tiste, na vrtu CSS Zen so uporabile ozadja CSS za zamenjavo pisave, v prizadevanju za pravičnost delaš nekaj svojih modelov. Prav tako smo poskušali Flash / JavaScript hacks ® za dosego naših ciljev oblikovanja. Nikakor ne gre za napačen način, da dobite pisave želje v naših spletnih modelov, vendar pa zagotovo ni najbolj zaželen način. in več let spletni oblikovalec, kot sem jaz, so v celoti oprla na deset ali tako pisav za svoje modele.

Nedavni dogodki v spletnih standardov in pisav formati omogočajo, da postane besedilo HTML v tipografij, ki niso iste stare privzete pisave. Prihaja v "@" fontface decleration CSS.

@ Fontface provids rešitev za povezavo z dejansko datoteko pisave in jo naložite s spleta. Uporaba je @ fontface lahko oblikovalci uporabo pisav ne da bi morali zamrzniti besedilo kot slike za ozadje. Izvajanje je zelo naravnost naprej, kot je prikazano spodaj, ampak kot vse dobre stvari, ki imajo CON dela z njim, niso vsi brskalniki podpirajo eno "vrsto pisave". Če nameravate uporabiti je @ fontface v mestu z zahtevo, navzkrižno brskalnika podporo, nato pa boste morali zagotoviti vire za različne vrste font-teh.

1. TrueType - format zasnovan tako, da izgleda dobro na zaslonu. Priporočamo zlasti za Windows brskalnike (Chrome).
2. OpenType (CFF) - Ta format je boljši za delo tiskanja in ne vedno videti dobro na Windows.
3. EOT - You need to format, če želite ciljati Internet Explorer. IE ne bo uporabil katero koli drugo obliko. Naša EOT'S, veljali za "Lite", saj se niti ne stisnejo domene omejena.
4. SVG - To je XML format podpori nekaterih brskalnikih, vključno z iPhone.
5. WOFF - Ta navzkrižno brskalnik, web-samo oblika pisave je lahek (font podatki zip stisnjenega) in jih je treba urediti bodisi z TrueType ali PostScript (CFF) opisuje. Danes je podprta z Firefox 3.6 +.

Uporaba je @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular";
 SRC: url ("CalligraphyFLF.eot ');
 SRC: lokalni ("CalligraphyFLF), lokalni (" CalligraphyFLF), url ("CalligraphyFLF.woff") format ("woff), url (" CalligraphyFLF.ttf ") format (" TrueType), url ("CalligraphyFLF . SVG # CalligraphyFLF ") format (" SVG ");
 }
 @ Font-face {
   font-family: "Vaša tipografija";
   SRC: url ("pisave / font_filename.eot");
   SRC: lokalni ("nadomestni ime"), lokalni ("Alternatename"),
     url ("pisave / font_filename.woff") format ("woff"),
     url ("pisave / font_filename.otf") format ("OpenType"),
     url ("fonti / font_filename.svg napake # font_filename") format ("SVG");
   }
 H2 {font-family: "Vaša Pisava", Gruzija, serif;} 

Kot lahko vidite iz zgoraj primer, da so izbrane tipografije pisav, se je treba povezati na niz fonttypes za isto obliko pisave. Zato ljudje imenujejo tudi "Kit pisave".
Obstaja pisave kompleti voljo, da izrecno omogoča povezovanje s CSS je @ font-face premoženja, ki mu ga po pogodbi za končnega uporabnika (EULA licenca).

Koristni viri WebFont:

• Pisave na voljo za @ font-face vdelave strani wiki na http://webfonts.info/wiki/index.php?title=Main_Page~~pobj
  
• Ray Larabie . On je znan pisave oblikovalec, ki je dosegla več sto zanimivih TrueType prosto na voljo za uporabo na spletu. Njegove pisave so elegantne, dekorativne in igriv.
• Dieter Steffmann je še en velik oblikovalec črk. Tudi on je dosegla veliko lepih pisav na voljo za vsakogar za uporabo.
• Font trgovina : ponuja pisave izdelane posebej za uporabo v spletu. Več kot 30 najbolj uspešnih FontFont družine so zdaj na voljo v spletnih FontFonts. FontShop tudi podrobno WebFont uporabniški priročnik http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf~~dobj
  
• Font Squirrel : vitrine vse pisave, ki pisave Squirrel daje na voljo za uporabo z @ font-face vgrajevanjem CSS. Font Squirrel ponuja impresivno količino vrste, zaradi česar je mrtev preprosta za enega izločiti, in pri roki ponuja "pakete" - črkovnih vrst po vaši izbiri, v več formatih, pakirani z demo HTML in CSS, ki jih uporablja zelo trenutno je @ font-obraz sintakso . Prav tako ponujajo možnost, da bi svoj ​​obraz @ s font-kompletov . Če je bila tipografija želite uporabiti ustrezno licenco (tisti, ki prihajajo z računalnikom niso nujno v redu), generator proizvede EOT, SVG in hej! WOFF datotek.

Z mojo omejeno sposobnostjo dvojice z orodji, kot so Photoshop in Illustrator, lahko iskreno priznam, da sem boljši od mene razvijalec oblikovalec. Vendar pa je moj ozadje z jedrom (Strežnik stran) razvoj z Java / php / COBOL, je bil zelo pozitiven vpliv na moje uporabniškega vmesnika razvojne sposobnosti. Mislim, medtem ko ustvarjanje svoje modele, in sicer, ko sem narediti načrt, mislim, da o tem, kako je mogoče najbolje oblikovanje pretvori v HTML-SPD, medtem ko delaš HTML, CSS, sem dal misel o backend tehnologijo in se prepričajte razumno da je mogoče zlahka prenesti v HTML XSL zank ali PHP itd izrezkov

Več let, so me vrgli na glavo, da modeli, ki jih oblikovalci uporabniškega vmesnika, ki verjetno donot imela pojma, kaj HTML ali CSS je. Vsa ta leta sem mislil, da bom zahtevala preveč, če sem pričakujem oblikovalec, ki poskuša shov svoje "nemogoče" kode oblikovanja grlu, razumeti le malo, kaj bi se pretvori njegova zasnova v. To bi prav pomoč?

Potem sem prišel čez to delovno mesto ... danes spletnih oblikovalcev, ki ne morejo številka ... Hvala Gospod! Jaz sem samo ena izmed mnogih, ki menijo enako ... zgoraj artitle je malo dolgo daha .. ampak vredno branje, vsaka beseda za to.

Hvala Elliot Jay zaloge ... Počutim se odleglo!

Tukaj je nekaj odlomkov iz članka Elliots .

Wow, kaj dan! Začelo se je z eno malo Cvrkutati in se je končal z razpravo, ki je zdelo, da pomete po vsej Skupnosti web design. Zdi se, da je nekaj zelo močnih mnenj potekala na temo, ali naj oblikovalci spletnih strani lahko kodo.
...
Torej, preden smo prišli v to, mi dovolite, da hitro povzamem, kaj sem rekel o tem zjutraj na Twitterju:

Iskreno, sem šokirana, da je v letu 2010 sem še vedno prihaja prek njihove spletne oblikovalcev ', ki ne morejo kode svoje modele. Ni izgovor.

... Sem morala sem bil malo bolj natančen v moji Cvrkutati. Govoril sem o tem oblikovalcev, ki nimajo niti najbolj osnovne HTML in CSS sposobnosti vrteti ravno dizajn v dejanskem mestu. Ne ljudje, ki namerno ne odločijo za kodo, tisti, ki ne morejo. In jaz sem prav tako nanaša le na kode čelni tukaj, seveda to je smešno, da razmišljajo, da oblikovalci morajo biti tudi neverjetno back-end programerje ...

Dobimo 'mreža' modele poslana v Illustrator, 300 dpi, nemogoče, da kodo, ki niso dosledni / uporabnost.
~ Amy Mahon

To je pridobivanje pozno in moram zaviti to gor nekako. Vem, da bodo mnogi, ki ne strinjate z mano, in moj namen ni žaliti ali razburjena nikogar, ki ne morejo kodo, vendar upam, da nekaj, kar sem dejal, odraža nekaj točk, ki vedno pridejo, ko delving ta razprava.

Ob koncu dneva, ne izgubijo nobenega spanja več, ki lahko kodo in kdo ne. Jaz sem samo resnično presenečeni ugotovili, da veliko oblikovalcev, ki nimajo front-end spretnosti, kot sem mislil, to je stvar preteklosti.

Preberite tudi pripombe, je bilo okoli 320 pripomb, kot sem napisal ... ti je vredno prebrati.
Prosimo, preberite celotno Elliots komentar tukaj .. Spletni oblikovalci, ki ne morejo koda

Ker radio gumb, besedilo pa sta vrstici, tako da bo besedilo se uskladi na dno gumb, se bo besedilo videti nekoliko pod radijski gumb.
Če želite to uskladiti do vrha, boste morali postaviti radio in besedilo v ločenih zabojnikih, kot so divs ali povezuje (po potrebi) in bodo poskrbeli za uskladitev. To bi bilo lažje za uporabo celic tabele tudi za vaš dizajn kratko to dovoljuje.

To ne bo videti enako v vsakem brskalniku, kot vsak brskalnik prikaže radio nekoliko drugače, tako da je vedno bo velika vprašanja, ne glede na to, kaj počnete.