2010 Március 13, 2010

@ Fontface: kifejezése azt a betűtípust az Ön által választott használata WebFonts

10 év CSS léte ebben az évben! Azok, akik már körül egy ideig, kiérdemelve a kenyerét (vagy nem) a CSS segítségével, akkor lehet, hogy tudja, milyen mi már éhes a jól kiválasztott betűtípusok. Még a hiányzó betűtípusok tervezők, mint amilyen a CSS Zen Garden éltek CSS háttérképeket betűtípusok helyett a törekvés csinál valami igazságszolgáltatás terveiket. Azt is próbáltam Flash / JavaScript ® csapkod, hogy elérjük a célokat. Semmi esetre ez egy rossz módszer a betűtípusok vágyunk a mi web design, de egyértelműen nem ez a leginkább kívánatos módon. és az évek során webdesigner, mint én, már teljes mértékben támaszkodott vagy tíz font a terveiket.

Újabb fejlemények a webes szabványokat, és font formátumok lehetővé teszik a szöveget HTML teszik betűtípusok más, mint a régi alapértelmezett betűtípusokat. Jön a "@ fontface" CSS decleration.

@ Fontface provids megoldást összekapcsolni az aktuális betűtípus fájlt, és keresse ki a webről. A @ fontface, tervezők betűtípusok használatával anélkül, hogy fagyassza be a szöveget a háttérképeket. A megvalósítás igen egyszerű, az alábbiak szerint, de mint minden jó dolog van CON részt hozzá, nem minden böngésző támogatja egy "betűtípus". Ha azt tervezi, hogy használni @ fontface a helyszínen igénylő kereszt böngésző támogatja, akkor meg kell, hogy a különböző forrásokból font-típusú ugyanaz.

  1. TrueType - A formátum célja, hogy jól nézzen ki a képernyőn. Ajánlott különösen a Windows böngészők (Chrome).
  2. OpenType (CFF) - Ez a formátum jobb nyomtatási munka, és nem mindig jól néz ki a Windows.
  3. EOT - Meg kell ezt a formátumot, ha szeretné megcélozni az Internet Explorer. IE nem használ semmilyen más formában. Mi a EOT lenne tekinthető "Lite", mivel ezek nem tömöríti, sem domain-korlátozott.
  4. SVG - Ez egy XML formátum által támogatott egyes böngészők, beleértve az iPhone.
  5. WOFF - Ez a kereszt-böngésző, web-only font formátum könnyű (betűtípus adatok zip tömörített) és lehet összeállítani vagy TrueType vagy PostScript (CFF) vázolja. Ezt jelenleg a Firefox 3.6 +.

A @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular";
 src: url ('CalligraphyFLF.eot');
 src: a helyi ('CalligraphyFLF "), helyi (" CalligraphyFLF "), url (' CalligraphyFLF.woff) formátumban (" woff "), url ('CalligraphyFLF.ttf) formátumban (" TrueType "), url (' CalligraphyFLF . svg # CalligraphyFLF) formátumban ("svg");
 }
 @ Font-face {
   font-family: "A betűtípus";
   src: url ("fonts / font_filename.eot");
   src: helyi ("Alternatív név"), helyi ("Alternatename"),
     url ("fonts / font_filename.woff") formában ("woff"),
     url ("fonts / font_filename.otf") formában ("OpenType"),
     url ("fonts / font_filename.svg # font_filename") formában ("SVG");
   }
 h2 {font-family: "A betűtípus", Georgia, serif;} 

Mint látható a fenti példa, hogy tartalmazza a betűtípust választott betűtípus, az egyik linkelni egy sor fonttypes azonos betűtípussal. Ezért az emberek hivatkoznak rá, mint "Betű készlet".
Vannak font készletek rendelkezésre, amely kifejezetten lehetővé teszi, hogy összekapcsolja a CSS @ font-face ingatlan alatt végfelhasználói licencszerződés (EULA).

Hasznos WebFont források:

  • Betűtípusok rendelkezésre @ font-face beágyazás wiki oldalt http://webfonts.info/wiki/index.php?title=Main_Page
  • Ray Larabie . Ő egy neves tervező, aki font tette több száz érdekes TrueType betűkészletek szabadon használhatónak az interneten. Ő betűtípusok elegáns, dekoratív, és játékos.
  • Dieter Steffmann egy másik nagyszerű font tervezője. Ő is tette sok szép fontokat bárki számára használható.
  • Betűtípus bolt : betűtípusokat kínál kifejezetten webes felhasználásra. Több mint 30 a legsikeresebb FontFont család most a weben elérhető FontFonts. FontShop is van egy részletes használati útmutató WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  • Betűtípus Mókus : vitrinek összes betűtípust, hogy a betű Mókus kínál használható @ font-face CSS beágyazás. Betűtípus Mókus kínál lenyűgöző mennyiségű típusú teszi halott egyszerű felvenni egyet, és handily kínál "készletek" - a betűtípust választott, különböző formátumokban csomagolni demo HTML és CSS, amely nagyon aktuális @ font-face szintaxis . Ők is kínálnak egy módja annak , hogy a saját @ font-face készletek . Ha a betűtípust szeretnénk használni engedélyezték megfelelően (az is, hogy jön a számítógép nem feltétlenül baj), a generátor termel EOT, SVG, és hé! WOFF fájlokat.

2010 Március 9, 2010

Ennek a "Web tervezők, akik nem tudnak kód"

Az én korlátolt skill-set olyan eszközökkel, mint a Photoshop és Illustrator, Őszintén bevallom, hogy jobb vagyok, mint fejlesztő vagyok designer. De a háttér alapvető (szerver oldalon) fejlesztés Java / PHP / COBOL, már egy nagyon pozitív hatást gyakorol az én UI fejlesztési képességek. Úgy értem, hogy ezzel egyidejűleg létrehozza a terveimet, azaz amikor csinálok design, azt hiszem, arról, hogy a design a legjobban alakítani HTML-CSS és mindeközben a HTML-CSS, adok egy gondolat a technológia és a backend, hogy ésszerűen biztos A HTML könnyen építeni XSL hurkok vagy PHP kódrészlet, stb

Az évek, én dobták a fejét, hogy tervei szerint a UI designerek, akik valószínűleg donot van egy nyom, amit a HTML vagy CSS. Mindezek Évek óta arra gondoltam, hogy én túl sokat kér, Ha most várják a tervező, aki megpróbálja shov ő "lehetetlen kód" dizájn a torkomon, hogy megértsék, csak egy kicsit, mi a dizájnt kell átalakítani be. Hogy segítene ugye?

Aztán jöttem át ezt a hozzászólást ... ma webes tervezők, akik nem tudnak kódot ... Köszönöm Uram! Én csak egy a sok közül, aki úgy érzi, ugyanazt ... A fenti artitle egy kicsit hosszú kifulladt .. de megéri az olvasható, minden szavát.

Köszönöm Elliot Jay Készletek ... Én megkönnyebbültem!

Itt van néhány részleteket Elliots cikk .

Wow, micsoda nap! Úgy kezdődött, hogy egy kis csipog, és végül a vita, úgy tűnt, hogy söpörni az egész web design közösség. Úgy tűnik, van néhány nagyon erős véleményt a témában tartott attól, hogy webes tervezők számára lehetővé kell tenni a kódot.
...
Szóval, mielőtt beérünk ezt, engedje meg, hogy gyorsan zárja le, mit mondtam én ma reggel a Twitter:

Őszintén szólva, én vagyok döbbenve, hogy 2010-ben én még mindig jön át "webes tervezők, akik nem tudják kódolni a saját tervezésű. Nincs mentség.

Én ... meg voltam egy kicsit konkrétabb az én csipog. Beszéltem a tervezők, akik nem rendelkeznek még a legalapvetőbb HTML és CSS ismeretek fordulni lapos kialakításának egy aktuális oldalt. Nem az emberek, akik szándékosan nem akarnak kódot; azoknak, akik nem képesek. És én is, hogy azok csak a front-end ide a kódot, persze ez nevetséges azt gondolni, hogy a tervezők is lehet csodálatos back-end programozók ...

Kapunk "web" tervez elküldeni az Illustrator, 300dpi, lehetetlen kódot, nincs következetesség / használhatóság.
~ Amy Mahon

Késõre, és kaptam, hogy lezárja ezt valahogy. Tudom, hogy sokan lesznek, akik nem értenek egyet velem, és a célom nem az, hogy támadó vagy ideges, aki nem tud kódot, de remélem, hogy néhány, amit mondtam tükrözi egyes pontokat, hogy mindig jön ki, ha részletezném ezt a vitát.

Végén a nap, nem veszíti el aludni akik tudnak programozni, és akik nem. Én csak őszintén meglepődött, annyi, hogy a tervezők nem rendelkeznek a front-end készségek, mint én gondoltam, hogy ez volt a múlté.

Továbbá olvassa el a megjegyzést, volt kb 320 észrevételeiket, írok ... ők érdemes olvasni.
Kérjük, olvassa el a teljes post itt Elliots .. webes tervezők, akik nem tudják kódolni


2010 Március 4, 2010

Illesztése rádió gomb szöveges

Mivel a rádió gombot, és a szöveg nem inline, hogy a szöveg majd igazodnia az aljára a rádió gombot, az a szöveg jelenik meg valamivel a rádió gombot.
Ha azt akarjuk, hogy ezek igazítani a csúcsra, akkor meg kell helyezni a rádió és a szöveg külön konténerekben vagy nyúlik, mint a divs (adott esetben), és vigyázni fog az összehangolódás. Nem lenne egyszerűbb táblázatcellákhoz is, a design lehetővé teszi rövid.

Ez nem ugyanúgy néz ki minden böngészőben, ahogy minden böngésző jeleníti rádiók kicsit másképp, így mindig lesz méretű kérdések nem számít, mit teszel.


NDK home | Kifejezése IT | kifejezése szájpadlás | kifejezése Penmenship | kifejezése Awe | kifejezése Myself