2010 13 Kov 2010

@ Fontface: Išreikšti savo pasirinkimą šriftu; Naudojant WebFonts

CSS baigė 10 metų egzistavimo šiemet! Tie, kurie buvo maždaug už o, uždirbti savo duonos (arba ne), naudojant CSS, tada jums gali žinoti, kaip mes jau badauja geras pasirinkimas šriftų. Net trūksta šriftų dizaineriai, pavyzdžiui, CSS Zen Garden pasinaudojo CSS fono paveikslėlius pakeisti šriftus daro kai kurie jų dizaino teisingumo vykdymo. Mes taip pat bandė Blykstė / JavaScript ® hacks pasiekti mūsų dizaino tikslus. Jokiu būdu tai neteisingas būdas gauti pageidaujamus šriftus į mūsų interneto dizaino, bet tikrai tai nėra labiausiai pageidautinas būdas. ir per metus web dizaineris, kaip ir aš, visiškai rėmėsi dešimt ar šriftus savo dizaino.

Naujausi pokyčiai interneto standartai ir šriftų formatų, kad tai įmanoma padaryti HTML tekstą, išskyrus tuos pačius senus numatytuosius šriftus, šrifto. Ateina "_AT_ fontface" CSS decleration.

"@ Fontface provids sprendimą susieti su faktiniu šrifto failą ir pasirinkite jį iš interneto. Naudojant @ fontface, dizaineriai gali naudoti šriftus be užšaldyti kaip fono paveikslėlius tekstą. Įgyvendinimas yra labai tiesiai pirmyn, kaip parodyta žemiau, bet, kaip visi geri dalykai turi CON jo, ne visos naršyklės palaiko vieną šriftą ". Jei jūs planuojate naudoti @ fontface, reikia kirsti naršyklės paramą svetainėje, tada turėsite pateikti šaltinius įvairių šriftų tipų pats.

  1. "TrueType" - formatas sukurtas gerai atrodyti ekrane. Rekomenduojama ypač Windows naršyklėmis "Chrome").
  2. OPENTYPE (CFF) - Šis formatas yra geriau spausdinimo darbams ir ne visada atrodo gerai, "Windows".
  3. EOT - Jūs turite šį formatą, jei norite reklamuoti "Internet Explorer". IE naudoti bet kokį kitą formatą. Mūsų EOT būtų laikoma "Lite", nes jie nei suspausta, nei domeno apribota.
  4. SVG - tai XML formatas palaiko kai kuriose naršyklėse, įskaitant iPhone.
  5. WOFF - Šis kryžius naršyklė, interneto tik šrifto formatas yra lengvas (šrifto duomenys yra zip suspaustas) ir gali būti sukompiliuotos su arba TrueType "ar" PostScript "(CFF) nurodanti. Ji šiuo metu palaiko "Firefox 3.6 +.

Naudojant @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular";
 src: url ("CalligraphyFLF.eot);
 src: vietos (CalligraphyFLF ".), vietos (" CalligraphyFLF), url ("CalligraphyFLF.woff) formatas (" woff), url ("CalligraphyFLF.ttf") formatas ("TrueType"), url ('CalligraphyFLF «. -. svg # CalligraphyFLF) formatą (SVG);
 }
 @ Font-face {
   font-family: "Jūsų šriftas";
   src: url ("šriftai ir (arba) font_filename.eot");
   src: vietos ("Alternatyvus pavadinimas"), vietos ("Alternatename)
     url ("šriftai ir (arba) font_filename.woff") formatas ("woff"),
     url ("šriftai ir (arba) font_filename.otf") formatas ("OPENTYPE"),
     url ("šriftai ir (arba) font_filename.svg # font_filename") formatą (SVG);
   }
 h2 {font-family: "Jūsų šriftas", Gruzija, serif ";} 

Kaip matote iš pirmiau pateiktame pavyzdyje, į pasirinktą šrifto, šrifto, turi, susieti rinkinį fonttypes pačiu šriftu. Taigi žmonės jį nurodo kaip "Šriftas Kit".
Yra šriftų rinkinių, aiškiai leidžiama susieti su CSS @ font-face turtą pagal galutinio vartotojo licencinė sutartis (EULA).

Naudingos WebFont ištekliai:

  • @ Font-face laikydamos wiki puslapyje adresu http://webfonts.info/wiki/index.php?title=Main_Page~~pobj esamas šriftus
  • Ray Larabie . Jis yra garsus šrifto dizaineris, kurie padarė šimtus įdomių TrueType šriftus laisvai galima naudoti internete. Jo šriftai yra elegantiška, dekoratyvi ir žaismingas.
  • "Dieteris Steffmann" yra dar vienas didelis šrifto dizaineris. Jis taip pat padarė daug gražių šriftų prieinamas visiems naudoti.
  • Šrifto parduotuvė : siūlo šriftus, specialiai skirtas interneto naudojimo. Daugiau nei 30 iš sėkmingiausių FontFont šeimų dabar galima interneto FontFonts. FontShop taip pat turi išsamų WebFont vartotojo instrukciją http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf~~dobj "
  • Šrifto Voverė : demonstruoja visus šriftus, kad Voverė Šrifto siūlo naudoti su @ font-face CSS įterpimo. Voverė Šrifto siūlo įspūdingą kiekį, tipą, todėl jis miręs paprasta pasirinkti vieną, ir patogiai "siūlo" rinkiniai "- jūsų pasirinktą teksto šrifto, įvairiais formatais, supakuoti su demo HTML & CSS, kad naudoja labai dabartinę @ font-face sintaksę . Jie taip pat siūlo būdą, kaip padaryti savo @ font-face rinkiniai . Jei norite naudoti šriftas buvo licencijuota tinkamai (tie, kurie ateina su kompiuteriu ne visada gerai), generatorius gamina EOT, SVG, ir hey! WOFF failai.

2010 Mar 9 2010

Jos apie "interneto dizainerių, kurie negali kodo"

Mano riboto įgūdžių rinkinį su įrankiais kaip Photoshop ir Illustrator, aš galiu nuoširdžiai prisipažinti, kad esu geriau vystytoją, kaip aš esu dizaineris. Bet mano fonas su pagrindinio (serverio pusėje) su Java / PHP / Cobol, buvo labai teigiamos įtakos mano UI plėtros įgūdžių. Ką reiškia, kuriant savo dizainą, ty, kai aš padaryti dizainą, manau, apie tai, kaip dizainas gali būti geriausiai konvertuojami į HTML CSS ir tuo pat metu daro HTML CSS, aš turiu duoti mintį apie posistemės technologija ir pagrįstai tikrai kad HTML gali būti lengvai perkelta į XSL kilpomis arba PHP ištraukos ir kt.

Per metus, aš įmestų galvą į dizaino UI dizaineriai, kurie tikriausiai donot turėti clue, kas HTML ar CSS. Visus šiuos metus aš galvoju, kad man būtų per daug prašo, Jei aš tiesiog tikėtis, kad dizaineris, kuris ir bando shov jo "neįmanoma kodo" dizaino žemyn mano gerklės, suprasti, tik šiek tiek jo dizainas bus konvertuoti į. , Kad padėtų teisę?

Tada, aš atėjau visoje šio posto, šiandien ... Web dizaineriai, kurie negali kodas ... Ačiū Viešpatie! Aš esu tik vienas iš daugelio, kurie jaučia tą patį ..., virš artitle yra šiek tiek ilgai kalbantis .. bet verta skaityti, kiekvieną jos žodį.

Ačiū Elliot Jay Atsargos ... Jaučiuosi atleisti!

Štai kai kurios ištraukos iš Elliots straipsnyje .

Oho, kas dieną! Viskas prasidėjo vieną mažą Čivināšana ir baigėsi su diskusijų, kurios atrodė Valyti visoje interneto dizaino bendruomenę. Atrodo, yra keletas labai stiprių nuomonės, ar interneto dizaineriai turėtų sugebėti kodo tema.
...
Taigi, prieš mes į tai, leiskite man greitai Priminti ką pasakiau šį rytą dėl Twitter:

Sąžiningai, aš esu šokiruotas, kad 2010 m. Aš vis dar ateina per "interneto dizaineriai", kurie negali kodą savo dizainą. Nėra pasiteisinimas.

... Aš buvau šiek tiek labiau specifinis mano Čivināšana. Aš kalbu apie dizainerių, kurie neturi net paprasto HTML ir CSS įgūdžius paversti plokščią dizainą į faktinį svetainėje. Ne žmonės, kurie sąmoningai renkasi ne į kodą, tiems, kurie negali. Ir aš tik front-end kodas čia, žinoma, tai juokinga manyti, kad dizaineriai taip pat turėtų būti nuostabi back-end programuotojai ...

Mes gauti dizaino 'web' Illustrator, 300dpi išsiųsti neįmanoma kodą, jokio nuoseklumo / praktiškumo.
~~ Amy Mahon

Jis darosi vėlu, ir aš turiu tai padaryti kažkaip wrap. Žinau, ten bus daug, kurie nesutinka su manimi, ir mano tikslas nėra įžeisti arba sutrikdyti bet kam, kas negali kodas, bet aš tikiuosi, kad kai ką sakiau atspindi kai kuriuos jos punktus, kad visada ateina, kai pasinėrė į ši diskusija.

Tuo dienos pabaigos, aš ne prarasti bet virš kurie gali koduoti ir kurie negali miegoti. Tiesiog esu tikrai nustebęs, kad atrasti tiek daug dizainerių, kad trūksta front-end įgūdžių, kaip aš maniau, tai buvo praeityje.

Taip pat perskaitykite pastabas, buvo apie 320 komentarai, kaip aš rašau ... jie verta perskaityti.
Prašome skaityti Elliots visą pranešimą čia ... Web dizaineriai, kurie gali ne kodas


2010 Mar 4 2010

, Lygiavimas radijo mygtuką su tekstu

Kadangi radijo mygtuką ir tekstas yra inline, kad tekstas bus suderinti mygtuką apačioje, tekstas atrodo šiek tiek pagal mygtuką.
Jei norite suderinti į viršų, jūs turėsite radijo ir tekstą į atskirus konteinerius, pavyzdžiui, DIV ar driekiasi (atitinkamai) ir jie rūpinsis derinimą. Būtų lengviau naudoti lentelės langelius, jūsų dizainas trumpas, tai leidžia.

Tai neatrodo pats kiekvienoje naršyklėje, nes kiekviena naršyklė rodo radijo šiek tiek skirtingai, todėl visada bus dydžio klausimus, nesvarbu, ką jūs darote.


NDK namo | Išreikšdami IT | Išreikšti paletė | Išreikšti Penmenship | Išreikšti Awe | Išreikšti Pats