Wyrażając

CSS ukończone 10 lat istnienia tego roku! Ci, którzy już od jakiegoś czasu, zdobywając swój chleb (lub nie) za pomocą CSS, to może świadomość, w jaki sposób zostaliśmy głodujących na dobry dobór czcionek. Nawet przy braku czcionek projektantom, jak te na CSS Zen Garden skorzystało z obrazów CSS tła, aby zastąpić czcionki w dążeniu do jakiejś sprawiedliwości ich wzorów. Mamy również próbował Flash / JavaScript ® hacki do osiągnięcia naszych celów projektowych. W żadnym wypadku nie jest to zły sposób, aby czcionki pragniemy w naszych projektach internetowych, ale na pewno nie jest najbardziej pożądanym sposobem. i ponad web designer lat, jak ja, w pełni oparła się na kilkunastu czcionek dla swoich projektów.

Ostatnie zmiany w standardach sieciowych i formatów czcionek pozwalają na renderowanie tekstu HTML w krojach innych niż tych samych czcionek starych fabrycznych. Przychodzi w "@ fontface" decleration CSS.

@ Fontface provids rozwiązania odnośnik do konkretnego pliku czcionki i pobrać go z internetu. Pomocą @ fontface, projektanci mogą używać czcionek bez konieczności zamrożenia tekst jako obrazów tła. Implementacja jest bardzo prosta, tak jak pokazano poniżej, ale jak wszystkie dobre rzeczy mają CON części do niego, nie wszystkie przeglądarki obsługują jeden "typ czcionki". Jeśli planujesz używać fontface @ w miejscu z konieczności wzajemnego wsparcia przeglądarki, wtedy musisz podać źródła do różnych czcionek-typy sam.

1. TrueType - format zaprojektowany dobrze wyglądać na ekranie. Zalecana szczególnie dla Windows przeglądarek (Chrome).
2. OpenType (CFF) - Ten format jest lepszy dla prac do druku i nie zawsze dobrze wyglądać w systemie Windows.
3. EOT - Musisz tego formatu, jeśli chcesz kierować Internet Explorer. IE nie użyje innego formatu. Nasza EOT, byłby uważany za "Lite", ponieważ są one ani ściskany ani domeny ograniczone.
4. SVG - To jest format XML obsługiwany przez niektóre przeglądarki, w tym iPhone'a.
5. WOFF - Ten cross-browser, web-jedyny format czcionki jest lekki (czcionka dane zip skompresowany) i mogą być kompilowane z obu TrueType lub PostScript (CFF) kontury. To jest obecnie obsługiwany przez Firefoksa 3.6 +.

Pomocą @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular";
 src: url ('CalligraphyFLF.eot');
 src: lokalne ("CalligraphyFLF"), lokalny ("CalligraphyFLF"), url ('CalligraphyFLF.woff ") format (" WOFF "), url (' CalligraphyFLF.ttf") format ('TrueType'), url ('CalligraphyFLF . svg # CalligraphyFLF ") format (" SVG ");
 }
 @ Font-face {
   font-family: "Twój Krój";
   src: url ("fonts / font_filename.eot");
   src: lokalne ("Alternate name"), lokalny ("Alternatename"),
     url ("fonts / font_filename.woff") format ("WOFF"),
     url ("fonts / font_filename.otf") format ("OpenType"),
     url ("fonts / font_filename.svg Miejsce font_filename") format ("SVG");
   }
 h2 {font-family: "Twoja krój", Gruzja, serif;} 

Jak widać z powyższego przykładu, aby włączyć wybrany krój czcionki, trzeba połączyć z zestawem fonttypes dla tego samego kroju pisma. Stąd ludzie o nim jako o "zestaw czcionek".
Istnieje czcionki Zestawy dostępne jawnie pozwala na łączenie z znaku @ CSS font-face własności do niego pod Umowie Licencyjnej Użytkownika Oprogramowania (EULA).

Przydatne zasoby WebFont ceny:

• Czcionki dostępne dla @ font-face osadzania stronie wiki w http://webfonts.info/wiki/index.php?title=Main_Page~~pobj
  
• Ray Larabie . On jest znany projektant czcionki, który złożył setki ciekawych czcionek swobodnie dostępne do użytku w internecie. Jego czcionki są eleganckie, dekoracyjne i zabawy.
• Dieter Steffmann to kolejny wielki projektant czcionki. On też dokonał wielu pięknych czcionek dostępne dla każdego.
• Sklep czcionki : oferuje czcionki zaprojektowane specjalnie do użytku internetowej. Ponad 30 z najbardziej udanych rodzin FontFont są teraz dostępne jako FontFonts internetowych. FontShop również szczegółowy użytkownika WebFont przewodnik http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf~~dobj
  
• Wiewiórka czcionki : prezentuje wszystkie czcionki, że wiewiórki Font oferuje do użytku z @ font-face osadzania CSS. Wiewiórka Font oferuje imponującą ilość rodzaju, sprawia, że ​​żyje prosty wybrać jeden, i dłoń "oferuje zestawy" - krój pisma do wyboru, w kilku formatach, zapakowane z demo HTML i CSS, który używa bardzo aktualny @ font-face składni . Oferują one również sposób tworzenia własnych @ font-face zestawy . Jeżeli krój chcesz korzystać został licencjonowany odpowiednio (te, które pochodzą z komputerem nie zawsze są w porządku), generator wytwarza EOT, SVG, i hej! Pliki WOFF.

Z mojej ograniczonej umiejętności zestawie z narzędzi takich jak Photoshop i Illustrator, mogę szczerze wyznać, że jestem lepszy niż developer Jestem projektantem. Ale mój tło z rdzeniem (po stronie serwera) rozwój z Java / PHP / COBOL, był bardzo pozytywny wpływ na moje UI umiejętności rozwojowych. Chodzi mi o to, tworząc swoje projekty, tzn. gdy robię projekt, myślę o tym, jak projekt może być najlepiej przekształcić HTML CSS i robiąc HTML-CSS, daję myśl o silnik do technologii i uczynić pewnym, że HTML można łatwo wdrożone do XSL pętli lub PHP fragmentów itp.

W ciągu lat, które zostały rzucone głową do projektów przez projektantów UI, który prawdopodobnie dawca ma pojęcia co HTML lub CSS. Wszystkie te lata myślałem, że będę pytać o zbyt wiele, Gdybym tylko oczekiwać projektant, który próbuje shov jego "niemożliwe do kodu napisanego kodu mi do gardła, aby zrozumieć tylko trochę, co jego konstrukcja będą przeliczane pod. Pomoże nam to prawo?

Wtedy natknąłem się tym poście dzisiaj ... projektantów stron internetowych, którzy nie mogą Kod ... Panie Dzięki! Jestem tylko jednym z wielu, którzy czują to samo ... powyżej artitle jest nieco długo zdyszany .. ale warto odczytu, każde słowo z nim.

Dzięki Elliot Zapasy Jay ... czuję ulgę!

Oto kilka fragmentów z artykułu Elliots .

Wow, co za dzień! Zaczęło się od jednej małej tweet i zakończyła się dyskusją, która zdawała się zamiatać w całej Wspólnocie, projektowanie stron internetowych. Wydaje się, istnieją bardzo mocne opinie znajdujące się na temat tego, czy projektanci stron internetowych powinni mieć możliwość kodu.
...
Tak więc, zanim przejdziemy do tego, pozwala mi szybko podsumować to, co powiedziałem o tym rano na Twitterze:

Szczerze mówiąc, jestem zaskoczony, że w 2010 roku nadal jestem przyjście across projektantów internetem, którzy nie mogą kodów własne wzory. Nie usprawiedliwia.

... Powinno byłem trochę bardziej szczegółowy w moim tweet. Mówiłem o projektantów, którzy nie mają nawet najbardziej podstawowy HTML i CSS umiejętności, aby włączyć płaską konstrukcję w rzeczywistym miejscu. Nie ludzie, którzy świadomie nie zdecydują się na kodzie, którzy pracować nie mogą. A ja również odnoszące się tylko do front-end kod tutaj, oczywiście, że to śmieszny pomysł, projektanci powinni być również niesamowite back-end programiści ...

Dostajemy spacerem internetem projekty nadesłane w programie Illustrator, 300dpi, niemożliwych do kodu, ma spójności / użyteczność.
~ Amy Mahon

Robi się późno, a ja mam otoczyć ten fakt jakoś. Wiem, że będzie wielu, którzy nie zgadzają się ze mną, a moją intencją nie jest obrażać lub zdenerwowany nikogo, kto nie kod, ale mam nadzieję, że część tego, co powiedziałem odzwierciedla niektóre z punktów, które zawsze przychodzą nawet gdy zagłębiając się tej debaty.

Na koniec dnia, nie tracić sen nad tym, kto może zakodować i kto nie może. Jestem szczerze zdziwiony tak wielu projektantów, którym brakuje umiejętności front-end, ponieważ myślałem, że to już przeszłość.

Również przeczytać komentarze, było około 320 komentarzy, jak piszę ... warto je czytać.
Prosimy o zapoznanie Elliots cały post tutaj .. Projektanci stron internetowych, którzy nie mogą kodu

Od przycisk radiowy i tekst są inline, więc tekst dostosuje się do dolnej części przycisku radiowego, tekst pojawi się nieco pod przyciskiem radiowym.
Jeśli chcesz je dostosować do góry, będziesz musiał umieścić radio i tekst w oddzielnych pojemnikach, takich jak DIV lub jest rozpięta (odpowiednio) i będą dbać o wyrównania. Byłoby to łatwiejsze w użyciu komórki tabeli też z twoja krótka konstrukcja na to pozwala.

To nie będzie wyglądać tak samo w każdej przeglądarce, jak każda przeglądarka wyświetla radia nieco inaczej, więc nie zawsze będzie zagadnienia rozmiar nie ważne co robisz.