2010 13 март 2010

@ Fontface: Изразявайки с шрифт по ваш избор; WebFonts "

CSS завършен 10 години съществуване тази година! Онези, които са били наоколо за известно време, изкарва хляба си (или не), използване на CSS, тогава може да знае как ние сме били жадни за добър избор на шрифтове. Дори и с липсата на шрифтове дизайнери като тези в CSS Zen Garden са се възползвали от фонови изображения на CSS, за да замени на шрифтове в преследването на някаква справедливост на техните проекти. Опитали сме се също Flash / JavaScript ® хакове за постигане на целите на нашия дизайн. В никакъв случай това е грешен начин да получите шрифтове, ние желаем в нашите уеб дизайн, но определено не е най-желаният начин. и през годините на уеб дизайнер, като мен, напълно разчита на десетина шрифтове за своите проекти.

Последните развития в уеб стандарти и формати на шрифтове правят възможно да се наеме HTML текст, шрифтове, различни от същите стари шрифтове по подразбиране. Предлага се в "@ fontface" decleration CSS.

_AT_ Fontface provids решение да се свърже към действителния файл на шрифта и да го изтеглите от интернет. Използвайки @ fontface, дизайнерите могат да използват шрифтове, без да се налага да замрази текст като фонови изображения. Изпълнението е много право напред, както е показано по-долу, но както всички хубави неща имат CON част към него, а не всички браузъри поддържат един шрифт ". Ако планирате да използвате @ fontface, в сайт с изискването на кръстосано браузър подкрепа, тогава ще трябва да предостави източници за различни типове шрифт на една и съща.

  1. TrueType формат, предназначен да изглежда добре на екрана. Препоръчва се особено за Windows браузъри (Chrome).
  2. OpenType (CFF) - Този формат е по-добре за печат работа и не винаги изглежда добре на Windows.
  3. EOT - Имате нужда този формат, ако искате да се насочите на Internet Explorer. IE няма да използва някакъв друг формат. Нашата EOT ще се счита за "Lite", тъй като те нито са компресирани, нито домейн ограничена.
  4. SVG - Това е XML формат, поддържан от някои браузъри, включително на iPhone.
  5. WOFF - Този браузър, уеб-само шрифт формат е лек (шрифт данни цип компресирани) и може да бъде компилиран с TrueType или PostScript (CFF) очертава. Той в момента се поддържа от Firefox 3.6 +.

Използване на @ fontface

  @ Шрифт в лице {
 шрифт семейство: "CalligraphyFLFRegular";
 SRC: URL (CalligraphyFLF.eot ");
 SRC: местни ("CalligraphyFLF"), местни ("CalligraphyFLF"), URL (CalligraphyFLF.woff ") формат (" woff "), URL (" CalligraphyFLF.ttf ") формат (TrueType '), URL (" CalligraphyFLF SVG # CalligraphyFLF ") формат (SVG);
 }
 @ Шрифт в лице {
   шрифт семейство: "Вашият шрифт";
   SRC: URL ("шрифтове / font_filename.eot");
   SRC: местни ("Алтернативен име"), местен ("Alternatename"),
     URL ("шрифтове / font_filename.woff") формат ("woff"),
     URL ("шрифтове / font_filename.otf") формат ("OpenType"),
     URL ("шрифтове / font_filename.svg на # font_filename") формат (SVG);
   }
 h2 {шрифт семейство: "Вашият шрифт", Грузия, Serif;} 

Както можете да видите от горния пример, за да се включват избрания шрифт шрифт, човек трябва да се свърже към набор от fonttypes за един и същ шрифт. Ето защо хората се отнасят към него като "Font Kit".
Има шрифтове комплекти, която изрично да позволява да се свързва с CSS @ шрифт в лице имущество по Лицензионно споразумение с краен потребител (EULA).

Полезни ресурси WebFont:

  • Шрифтове, налични за @ шрифт в лице вграждането на уики страница в http://webfonts.info/wiki/index.php?title=Main_Page
  • Рей Larabie . Той е известен дизайнер на шрифта, който е направил стотици интересни TrueType шрифтове, свободно достъпна за ползване в интернет. Неговите шрифтове са елегантни, декоративен, и игриво.
  • Дитер Steffmann е друг велик дизайнер на шрифта. Той също е направил много красиви шрифтове, за да го използва всеки.
  • Магазин на шрифта : предлага шрифтове, предназначени специално за уеб употреба. Повече от 30 от най-успешни семейства FontFont, сега са предлага уеб FontFonts. FontShop също има подробен потребител WebFont употреба http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  • Шрифт катерица : показва всички шрифтове, които Шрифт катерица предлага за използване с @ шрифт в лице вграждането CSS. Шрифт катерица предлага впечатляващо количество от тип, прави го мъртъв просто да изберат,, и handily предлага "комплекти" - шрифт по ваш избор, в няколко формата, опаковани с демо HTML и CSS, която използва много ток @ шрифт в лице синтаксис . Те също така предлагат начин да направите свои собствени при шрифт в лице комплекти . Ако искате да използвате шрифт е лицензиран подходящ начин (тези, които идват с вашия компютър, не са непременно добре), генераторът произвежда EOT, SVG и хей! WOFF файлове.

2010 Mar 9 2010

За "уеб дизайнери, които не могат да кодират"

С моя ограничен умения комплект с инструменти, като Photoshop и Illustrator, мога честно да призная, че съм по-добър разработчик, отколкото аз съм дизайнер. Но моята квалификация с ядро ​​(сървър) развитие с Java / PHP / COBOL, е едно много положително влияние върху потребителския интерфейс ми развитието на уменията. Какво искам да кажа е, като същевременно се създава проектите си, т.е. всеки път, когато правя дизайн, аз мисля, за това как дизайнът може да бъде най-добре преобразува в HTML, CSS и докато правите HTML, CSS, давам мисъл за гръб технологии и относително сигурни, че HTML може лесно да бъде внедрен в XSL примки или PHP откъси и др.

През годините съм бил хвърлен главата да дизайн от дизайнерите на потребителския интерфейс, който вероятно donot имат представа какво е HTML или CSS. През всичките тези години аз мислех, че аз ще иска твърде много, ако ви очакват на дизайнера, който се опитва да shov му "невъзможно да се код" дизайн в гърлото ми, да се разбере съвсем малко, какво му дизайн ще бъдат превърнати в. Това ще помогне нали?

Тогава се натъкнах на този пост днес ... уеб дизайнери, които не могат да код ... Благодарение на Господ! Аз съм просто един от многото, които се чувстват по същия ... горе artitle е малко дълъг скучен .. но си струва за четене, всяка дума от него.

Благодаря Елиът Джей запаси ... се чувстват освободени!

Ето някои откъси от Elliots статия .

Уау, какъв ден! Тя започна с една малка чуруликане и завърши с дискусия, която изглеждаше да почистват територията на цялата Общност за уеб дизайн. Изглежда, има някои много силни мнения по въпроса дали уеб дизайнери трябва да е в състояние да код.
...
Така че, преди да навлезем в това, позволете ми бързо да набележи това, което казах на тази сутрин на Twitter:

Честно казано, аз съм шокиран, че през 2010 г. Аз съм все още идват през уеб дизайнери ", които не могат да кодират свои собствени проекти. Не е извинение.

... Аз трябва да съм бил малко по-специфичен в моя чуруликам. Аз говорех за дизайнери, които нямат дори най-основната HTML и CSS умения да се превърне плосък дизайн в самия сайт. Не хора, които умишлено не изберат да се код, тези, които не могат. И също ми се отнасят само до предния край код тук, разбира се това е смешно да се мисли, че дизайнерите трябва да бъде невероятно крайните програмисти ...

Ние се "паяжината" дизайн, изпратени в Illustrator, 300dpi, невъзможно да се код, без съгласуваност / функционалност.
~~ Ейми Mahon

Става късно, и аз имам да приключи този нагоре по някакъв начин. Знам, че ще има много хора, които не са съгласни с мен, и моето намерение не е да обиди или разстрои всеки, който не може код, но се надявам, че някои от това, което казах отразява някои от точките, че винаги, когато дълбаят в този дебат.

В края на деня, аз не губят всеки сън, който може да кодира и които не могат. Аз съм просто истински изненадан да намерят толкова много дизайнери, които нямат предния край умения, тъй като мислех, че това е нещо от миналото.

Също така прочетете коментарите, имаше около 320 коментара, както аз пиша ... те са си струва да прочетете.
Моля, прочетете Elliots целия пост тук .. уеб дизайнери, които не могат да кодират


2010 Mar 4 2010

Подравняване на радио бутона с текст

Тъй като радио бутон и текстът са вграден, така че текстът ще се изравни до дъното на радио бутона, на текстът ще се появи, да бъде малко под радио бутона.
Ако искате те да се приведат до върха, ще трябва да поставите радио и текст в отделни контейнери, като DIV секциите или се разпростира (според случая) и те ще се погрижат за привеждане в съответствие. Би било по-лесно да се използват клетки на таблица, на вашия проект кратко го позволява.

Това няма да изглежда по същия начин във всеки браузър, като всеки браузър показва радио малко по-различно, така че винаги ще бъдат размерите въпроси, без значение какво правите.


НДК начало | Изразявайки | Изразявайки Вкус | Изразявайки Penmenship | Изразявайки страхопочитание | Изразяване на себе си