Vyjadrenie IT

CSS dokončené 10 rokov existencie tohto roka! Tí, ktorí boli nejakú dobu, si zarábajú na chlieb (alebo nie) pomocou CSS, potom by ste mali vedomí toho, ako sme boli hladní po dobrým výberom písma. Aj s nedostatkom písma dizajnéri ako tie, na CSS Zen Garden využili obrázkov na pozadí CSS nahradiť fonty v snahe o tom nejakú spravodlivosť do svojich návrhov. Tiež sme sa pokúsili Flash / JavaScript ® hacky na dosiahnutie našich cieľov návrhu. V žiadnom prípade to je zlý spôsob, ako dostať fonty sme žiadosť do našich návrhov, ale rozhodne nie je spôsob, ako najviac žiaduce. a viac rokov web designer, rovnako ako ja, plne spoliehal na desať alebo tak písma pre ich vykonanie.

Posledný vývoj na webových štandardov a formátov písiem, aby bolo možné urobiť HTML text v písmach iných ako rovnaké východiskové starých písiem. Dodáva sa v "@" fontface decleration CSS.

@ Fontface provids riešenie prepojenia na aktuálne fontu a získať ho z webu. Pomocou znak @ fontface môžu návrhári pomocou písma, bez toho aby museli zmraziť text ako obrázky na pozadí. Implementácie je veľmi priamočiara, ako je uvedené nižšie, ale ako všetky dobré veci majú CON časť k nemu, nie všetky prehliadače podporujú jeden "typ písma". Ak plánujete používať znak @ fontface v mieste s krížovou prehliadača vyžaduje podporu, potom budete musieť poskytnúť zdroje pre rôzne typy písma vedľajšej rovnaké.

1. TrueType - formát navrhnutý tak, aby vyzeral dobre na obrazovke. Doporučené predovšetkým pre Windows prehliadačov (Chrome).
2. OpenType (CFF) - Tento formát je lepšie pre tlačové práce a nie vždy vyzerať dobre na Windows.
3. EOT - Potrebujete tento formát, ak chcete zamerať Internet Explorer. IE nebude používať iný formát. Naše EOT je by bolo považované za "Lite", pretože nie sú ani komprimované, ani domény obmedzená.
4. SVG - toto je XML formát, ktorý podporuje niektoré prehliadače vrátane iPhone.
5. WOFF - Tento kríž-browser, web len formát písma je ľahký (písma dáta komprimovaný ZIP) a môžu byť zostavené buď TrueType alebo PostScript (CFF) obrysy. To je v súčasnej dobe podporuje Firefox 3.6 +.

Použitie znak @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular";
 src: url ("CalligraphyFLF.eot ');
 src: miestne ("CalligraphyFLF"), miestne ("CalligraphyFLF"), url ("CalligraphyFLF.woff") formát ("woff"), url ("CalligraphyFLF.ttf") formát ("TrueType"), url ("CalligraphyFLF . svg # CalligraphyFLF ") formátu ('SVG');
 }
 @ Font-face {
   font-family: "Vaša písmo";
   src: url ("/ font_filename.eot písma");
   src: miestne ("Alternatívne meno"), miestne ("Alternatename"),
     url ("/ font_filename.woff písma") formát ("woff"),
     url ("/ font_filename.otf písma") formát ("OpenType"),
     url ("Písma / font_filename.svg Č font_filename") formát ("SVG");
   }
 h2 {font-family: "Vaša písmo", Gruzínsko, serif;} 

Ako môžete vidieť z vyššie uvedeného príkladu, ktorý zahŕňa zvolený font písma, je potrebné sa odkaz na súbor fonttypes za rovnaké písmo. Preto ľudia sa odvolávajú na to ako "Písmo Kit".
Tam sú k dispozícii sady písma, ktorý výslovne umožňuje prepojenie s CSS @ font-face vlastníctvo k nemu na základe licenčnej zmluvy koncového používateľa (EULA).

Užitočné WebFont zdroje:

• Fonty sú k dispozícii pre @ font-face vnorenia stránky wiki na http://webfonts.info/wiki/index.php?title=Main_Page ~ ~ pobj
  
• Ray Larabie . On je známy dizajnér písma, ktorý urobil stovky zaujímavých TrueType fontov voľne k dispozícii na použitie na webe. Jeho písma sú elegantné, dekoratívne a hravé.
• Dieter Steffmann je ďalšia veľká písma dizajnér. On tiež robil veľa krásnych fonty dostupné pre každého, kto sa má použiť.
• Font obchod : ponúka písma určené špeciálne pre webové použitie. Viac ako 30 z najúspešnejších FontFont rodiny sú teraz dostupné ako webové FontFonts. FontShop tiež má detailné WebFont užívateľská príručka http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf ~ ~ dobj
  
• Font veverička : vitríny všetky písma Font Veverka ponúka pre použitie s @ font-face vkladanie CSS. Písmo Veverka ponúka impozantný množstvo typu, je to mŕtvy jednoduché vybrať jedno von, a hravo ponúka "výstroje" - písmo vášho výberu, v niekoľkých formátoch, balený s demo HTML a CSS, ktoré používa veľmi aktuálne @ font-face syntaxe . Ponúkajú tiež spôsob, ako vytvoriť svoj ​​vlastný @ font-face zostavy . Ak písmo chcete použiť bol licencovaný správne (tie, ktoré prídu s počítačom nemusí byť nutne v poriadku), generátor vyrába EOT, SVG, a hele! WOFF súbory.

So svojím obmedzeným zručnosť-set s nástrojmi ako je Photoshop a Illustrator, môžem úprimne priznať, že som lepší než ja developer projektant. Ale moje pozadie s jadrom (server side) vývoj Java / php / COBOL, bol veľmi pozitívny vplyv na moje UI rozvoju schopností a zručností. Čo chcem povedať je, pri tvorbe svojich návrhov, tj keď robím dizajn, myslím, že o tom, ako môže návrh najlepšie previesť na HTML a CSS, ale nerobí HTML, CSS, dám myšlienku o backend techniky a vytvárajú pomerne istý že HTML je možné ľahko implementovať do XSL slučiek alebo PHP Výstrižky atď

V priebehu rokov som bol hodený na hlavu designov dizajnérmi užívateľského rozhrania, ktoré pravdepodobne donot majú poňatia, čo je HTML alebo CSS. Všetky tie roky som si myslel, že by som požiadať o moc, keby som len očakávať, že dizajnér, ktorý sa snaží Shove jeho "nemožné kódom designu krku dole, aby pochopil, len trochu, čo jeho design by byť prevedená do. To by pomohlo v poriadku?

Potom som narazil na tento príspevok Dnes ... webové dizajnérmi, ktorí nemôžu kód ... Vďaka Pane! Som len jedným z mnohých, ktorí sa cítia rovnako ... nad artitle je trochu dlhá rozvláčny .. ale stojí za čítanie, každý slovo.

Vďaka Elliot Jay Zásoby ... Cítim úľavu!

Tu je niekoľko výňatkov z Elliots článku .

Wow, to je deň! Začalo to jednou malou pípanie a skončil s diskusiou, ktorá sa zdala zamiesť po celej komunity web design. Zdá sa, že sú niektoré veľmi vyhranené názory, konané na tému, či návrhári by mali byť schopní kódu.
...
Takže než sa dostaneme do toho, dovoľte mi, aby som rýchlo zhrnúť, čo som povedal na dnešnej ráno na Twitteri:

Úprimne povedané, som šokovaný, že v roku 2010 som ešte narazil 'WWW dizajnérov, ktorí sa nemôžu kódu svoje vlastné návrhy. Žiadne ospravedlnenie.

... Ja som mala byť trochu konkrétnejší v mojom tweetu. Hovoril som o projektantov, ktorí nemajú ani tú najzákladnejšiu HTML a CSS schopnosti premeniť plochý dizajn do skutočného miesta. Nie ľudia, ktorí sa zámerne rozhodnú, že nebudú kódu, tí, ktorí nemôžu. A ja som tiež na mysli len front-end kód tu, samozrejme je to smiešne myslieť si, že dizajnéri by mal byť tiež úžasné back-end programátori ...

Dostávame 'WWW' designy zaslané v Illustratoru, 300 dpi, nemožné do kódu, bez konzistencie / použiteľnosť.
~ Amy Mahon

Je neskoro a ja musím zabaliť toto nejako. Viem, že tam bude veľa tých, ktorí so mnou nesúhlasia, a mojím zámerom nie je uraziť alebo rozrušenie niekoho, kto nemôžu kód, ale dúfam, že časť toho, čo som povedal, odráža niektoré z bodov, ktoré vždy prídu, keď ponorí do táto debata.

Na konci dňa, nemám strácať spánok nad tým, kto môže kód a kto nie. Som jednoducho naozaj prekvapený toľko dizajnérov, ktoré nemajú front-end zručností, ako som si myslel to minulosťou.

Prečítajte si tiež komentáre, bolo ich tam okolo 320 komentárov, ako som napísať ... že stojí za to čítať.
Prečítajte si prosím Elliots plné post tu .. Web návrhári, ktorí nemôžu zakódovanie

Vzhľadom k tomu, prepínač a text sú in-line, takže text zarovnať seba na spodnej strane prepínač, bude sa text javí ako mierne pod prepínačmi.
Ak si chcete tieto zladiť na vrchol, budete musieť umiestniť rádio a text do samostatných nádob, ako tagov alebo presahuje (podľa potreby) a oni sa postarajú o vyrovnanie. Bolo by jednoduchšie použiť bunky tabuľky aj vášho návrhu stručný dovolí.

To nebude vyzerať rovnako v každom prehliadači, pretože každý prehliadač zobrazí rádia trochu inak, tak tam vždy bude veľkosť problémy bez ohľadu na to, čo robíte.