Exprimarea IT

CSS completat de 10 ani de existenţă în acest an! Cei care au fost în jurul pentru un timp, castigand pâinea lor (sau nu) cu ajutorul CSS, atunci s-ar putea cunoştinţă modul în care am fost de foame pentru o bună selecţie de fonturi. Chiar şi cu lipsa de fonturi designeri, cum ar fi cele de la CSS Zen Garden s-au făcut uz de imagini de fundal CSS pentru a înlocui fonturi în căutarea de a face ceva dreptate la desenele lor. Am încercat, de asemenea, Flash / JavaScript ® hacks pentru a atinge obiectivele noastre de design. Prin nici un caz aceasta este o cale greşită de a obţine fonturi noi dorim în design web noastre, dar cu siguranta, aceasta nu este calea cea mai de dorit. şi peste web designer de ani, ca mine, s-au bazat în totalitate pe zece sau pentru fonturi pentru desenele lor.

Evoluţiile recente ale standardelor web şi formate de fonturi face posibilă pentru a face textul HTML în alte fonturi decât aceleaşi fonturi implicite vechi. Vine în "@ fontface" decleration CSS.

@ Fontface provids o soluţie pentru a face legătura la fişierul de font reală şi de a prelua de pe internet. Folosind @ fontface, proiectanţii pot folosi fonturi, fără a fi nevoie să îngheţe text ca imagini de fundal. Punere în aplicare este foarte drept înainte, aşa cum se arată mai jos, dar cum toate lucrurile bune au un rol CON pentru el, nu toate browserele suporta un singur "tip de font". Dacă intenţionaţi să utilizaţi @ fontface pe site-ul cu care necesită sprijin browser-ul cruce, atunci va trebui să furnizeze surse de la diferite tipuri de fonturi de aceeaşi.

1. TrueType - un format conceput pentru a arata bine pe ecran. Recomandat în special pentru browsere pentru Windows (Chrome).
2. OpenType (CFF) - Acest format este mai bine pentru munca de imprimare şi nu arată întotdeauna bine pe Windows.
3. EOT - Aveţi nevoie de acest format, dacă doriţi să vizaţi Internet Explorer. IE nu va folosi orice alt format. EOT nostru ar fi considerat "Lite", deoarece acestea nu sunt nici comprimate sau de domeniu limitat.
4. SVG - Acesta este un format XML, acceptat de unele browsere, inclusiv iPhone.
5. WOFF - Acest cross-browser, web-doar format font este usor (date de fonturi este zip comprimat) şi poate fi compilat fie cu fonturi TrueType sau PostScript (CFF) conturează. Ea este susţinută în prezent de Firefox 3.6 +.

Utilizarea @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular";
 src: url ("CalligraphyFLF.eot ');
 src: local ("CalligraphyFLF"), locală ("CalligraphyFLF"), format url ("CalligraphyFLF.woff") ("woff"), url ("CalligraphyFLF.ttf") format ("TrueType"), url ("CalligraphyFLF . svg # CalligraphyFLF ") format (" SVG ");
 }
 @ Font-face {
   font-family: "font ta";
   src: url ("fonturi / font_filename.eot");
   src: local ("nume alternativ"), locală ("Alternatename"),
     url ("fonturi / font_filename.woff") format ("woff"),
     url ("fonturi / font_filename.otf") format ("OpenType"),
     url ("fonturi / font_filename.svg # font_filename") format ("SVG");
   }
 h2 {font-family: "Your caractere", Georgia, serif;} 

După cum se poate vedea din exemplul de mai sus, pentru a include caractere fontul ales, o are de a lega la un set de caractere fonttypes pentru acelaşi. Prin urmare, oamenii se refera la ea ca "Kit Font".
Există seturi de caractere disponibile, care permite în mod explicit legătura cu CSS @ font-face de proprietate în temeiul End User License Agreement (EULA).

Resurse utile WebFont:

• Fonturi disponibile pentru @ font-face încorporarea pagina wiki la http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . El este un designer de fonturi de renume, care a făcut sute de fonturi TrueType interesante primare disponibile pentru utilizare pe web. Fonturile sale sunt elegante, decorative, şi jucăuş.
• Dieter Steffmann este un alt designer de font mare. El, de asemenea, a făcut mai multe fonturi frumoase disponibile pentru oricine de a utiliza.
• Magazin Font : oferă fonturi proiectate special pentru utilizarea de web. Mai mult de 30 de familii FontFont mai de succes sunt acum disponibile ca FontFonts Web. FontShop are, de asemenea, o analiză detaliată a WebFont ghidul de folosire http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Squirrel Font : Vitrine toate fonturile pe care rotorul font oferă pentru utilizarea cu @ font-face încorporarea CSS. Squirrel font oferă o cantitate impresionantă de tip, face mort simplu pentru a alege unul afară, şi oferă autostrada "kituri" - caractere de alegerea dumneavoastră, în mai multe formate, ambalate cu demo-ul HTML si CSS care utilizeaza foarte actual @ font-face sintaxa . Acestea oferă, de asemenea, o modalitate de a face propriile @ font-face kituri . Dacă setul de caractere pe care doriţi să utilizaţi a fost autorizat în mod corespunzător (cei care vin cu computerul nu sunt neapărat bine), generatorul produce EOT, SVG, şi hei! Fişiere WOFF.

Cu meu limitat de aptitudini set cu instrumente, cum ar fi Photoshop şi Illustrator, pot să mărturisesc sincer că sunt un dezvoltator de mai bine decât am un designer. Dar trecutul meu, cu miez (partea de server), de dezvoltare cu Java / PHP / COBOL, a fost o influenţă extrem de pozitivă cu privire la competenţele mele de dezvoltare UI. Ce vreau să spun este, în timp ce crearea de modele mele, adică ori de câte ori am face design, cred despre modul în care designul poate fi cel mai bine convertit în HTML, CSS şi în timp ce face HTML-CSS, dau o idee despre tehnologia de backend şi asiguraţi-vă că în mod rezonabil HTML care pot fi uşor puse în aplicare în XSL bucle sau fragmente de PHP, etc

Peste ani, am fost aruncat pe cap de modele de designeri UI, care, probabil, donot au o idee despre ceea ce este HTML sau CSS. În toţi aceşti ani am gândit că mi-ar cere prea mult, dacă am aştepta de designer, care încearcă să shov lui "imposibil de cod" de design pe gât mea, pentru a înţelege doar un pic de design care sa va fi convertită în. Care ar ajuta la dreapta?

Apoi, am dat peste acest post de azi ... designeri de web, care nu pot cod ... Multumesc Doamne! Eu sunt doar unul dintre cei care simt la fel ... artitle de mai sus este un pic cam o tărăgănat timp .. dar merita citit, fiecare cuvânt din ea.

Mulţumeşte Elliot Stocuri Jay ... Mă simt uşurat!

Iată câteva fragmente din articol Elliots .

Wow, ce zi! A început cu un tweet mic şi sa încheiat cu o discuţie care părea să măture în întreaga comunitate de web design. Se pare ca exista unele opinii foarte puternice deţinute la obiectul de designeri web, dacă ar trebui să poată cod.
...
Deci, înainte de a intra în acest, permiteţi-mi să recapituleze rapid ceea ce am spus în această dimineaţă pe Twitter:

Sincer, sunt şocaţi de faptul că în 2010, eu încă mai vin de pe web designeri "care nu pot cod modele proprii. Nici o scuză.

Eu ar trebui să ... am fost un pic mai specific în tweet mea. Vorbeam despre designeri care nu au nici cea mai de bază HTML şi CSS abilităţile de a transforma un design plat într-o site-ul real. Nu oamenii care în mod intenţionat nu aleg să cod, iar cei care nu pot. Şi eu, de asemenea, referindu-se doar la front-end, codul aici, desigur, este ridicol să cred că ar trebui să fie, de asemenea, designeri uimitoare back-end programatori ...

Ne 'web' desene trimise în Illustrator, 300dpi, imposibil de cod, nr coerenţa / utilizare.
~ Amy Mahon

Se face târziu, şi am ajuns să-şi încheie asta cumva. Ştiu că vor fi mulţi care nu sunt de acord cu mine, şi intenţia mea nu este de a jigni sau supara pe cineva care nu poate cod, dar sper că o parte din ceea ce am spus reflectă unele dintre punctele care vin întotdeauna atunci când cercetând această dezbatere.

La sfârşitul zilei, nu pierd nici un somn de peste care poate codeaza si care nu pot. Sunt cu adevărat surprins doar pentru a găsi designeri atât de multe că nu dispun de front-end competenţe, aşa cum am crezut acest lucru a fost un lucru de domeniul trecutului.

Asemenea să citiţi comentariile, erau în jur de 320 comentarii, după cum am scrie ... ei sunt în valoare de o citesc.
Vă rugăm să citiţi Elliots full post aici .. designerii Web care nu se poate de cod

Din butonul radio şi text sunt în linie, astfel încât textul se va alinia la partea de jos a butonului radio, textul va apărea pentru a fi uşor de sub butonul de radio.
Dacă doriţi ca acestea să se alinieze la partea de sus, veţi avea de a plasa radio şi textul în containere separate, cum ar fi divs sau trece peste (după caz) şi vor avea grijă de aliniere. Ar fi mai uşor de utilizat celule de tabel de asemenea, de scurtă de design-l permite.

Acest lucru nu va arata la fel in fiecare browser, ca de fiecare browser-ul afişează radio uşor diferit, deci nu e întotdeauna o să fie probleme de dimensiuni, indiferent de ceea ce faci.