Hack na @font-face – dowolna czcionka na stronie

 

100% @font-face -  dowolna czcionka na stronieMagia @font-face opisana  przeze mnie wymaga małego sprostowania. Wszystko wynika z faktu, iż różne przeglądarki akceptują różne formaty czcionek, linkowanych za pomocą @font-face.

Firefox i Chrome doskonale radzą sobie z formatem .ttf, natomiast Internet Explorer teoretycznie wspiera .eot. Jak w takim razie zapewnić spójną typografię na naszej stronie? Komentarze warunkowe mogą rozwiązać problem. Z tym, że to nieeleganckie rozwiązanie i należy je stosować w ostateczności.

Chcecie gotowca? Oto i on w całej okazałości:


@font-face {
  font-family: 'KISS design';
  src: url('Kissdesign.eot');
  src: local('KISS design Regular'), local('KISS design'),
         url('Kissdesign.otf') format('opentype');
}

Odrobina komentarza. Po pierwsze potrzebujemy w takim razie czcionki w dwóch formatach - .eot i .otf/.ttf. Z pewnością przyda Ci się doskonały i darmowy konwerter formatów czcionek opisany przeze mnie.

Po drugie, jeżeli przeglądarka znajdzie czcionkę o nazwie „KISS design Regular” na dysku lokalnym, zostanie ona użyta. Niesie to niewielkie ryzyko, że użytkownik będzie miał na swoim komputerze zupełnie inną czcionkę, zapisaną pod użytą przez nas nazwą. Warto mieć to na uwadze. Jeżeli jednak użytkownik nie posiada lokalnie żądanej czcionki, przeglądarka pobierze ją z serwera – „Kissdesign.otf”.

Po co w takim razie linkowanie „Kissdesign.eot”? Dla ukochanego IE. Internet Explorer zignoruje drugie wystąpienie „src: (…)”, ponieważ nie rozumie znaczenia klauzul local i format.

Jeżeli chcesz zgłębić ten temat, polecam wpis Bulletproof @font-face na blogu Paula Irisha.

 
 

Ikona warta tysiąca słów

 

Ikona = 1000 słów? Internet jako najszybsze medium zbudował cały arsenał nowych skrótów, skrótowców, ikon i logotypów. Znajomość tego metajęzyka to klucz do efektywnej komunikacji. Może powinniśmy powrócić do pisma hieroglificznego? Do przemyślenia ;-)

Tymczasem rzucam linka do wyszukiwarki ikon – iconfinder.com. Proste i niezwykle użyteczne narzędzie. Szczególnie, że mamy zestaw prostych filtrów wyszukiwania np. wg. licencji, rozmiaru…

Oczywiście to samo mamy na Google Images, ale tutaj nie musimy się przekopywać przez masę innych grafik, nie będącymi ikonami sensu stricte. Ot, specjalizacja to najczęściej klucz do sukcesu!

 
 

Uwolnić czcionki – dowolny font na stronie

 

Najnowsze przeglądarki już wspierają właściwość @font-face, która pozwala na podlinkowanie dowolnej czcionki. Następnie można jej użyć pod wybraną przez siebie nazwą. Zobacz jakie to proste:

@font-face {

font-family:"Times New Polkowski";

src: url(../resources/fonts/tnpolkowski.otf);

}

p{ font-family: "Times New Polkowski", Georgia, Times; }

Ok, to nie jest takie proste. Jeszcze. Nie został rozwiązany problem formatów czcionek – każda platforma i system operacyjny preferuje inny format. Do tego trzeba uważnie czytać umowy licencyjne fontów – najczęściej nie pozwalają one na wykorzystywanie w taki sposób (co sprytniejszy użytkownik może pobrać udostępnioną przez nas czcionkę).

Mimo to @font-face jest kuszącą perspektywą, która pozwoliłaby odesłać w niepamięć techniki podmiany tekstu obrazem. A to znaczy ogromną oszczędność czasu!

Podziel się ze mną opinią – czy ten wpis był przydatny?

 
 

Totalnie rozwijane menu w jQuery

 
Rozwiajane menu jQuery by Artur Polkowski

Rozwiajane menu jQuery. Kliknij, aby zobaczyć je w akcji lub pobrać.

Źle ułożone menu rozwijane może błyskawicznie zniechęcić użytkownika do aplikacji. Czuje się wtedy jak poszukiwacz złota z lichym wykrywaczem metali, co rusz natykający się na złom i niewypały. Co w takim razie zrobić by menu było user-friendly?

Po pierwsze uporządkować kategorie według klucza czynność – obiekt, co intuicyjnie stawia użytkownika jako osobę wydającą rozkazy. Osobę, która ma władzę nad aplikacją, a nie odwrotnie. Po drugie należy ukrywać opcje w danej chwili niepotrzebne, wprowadzające zamęt. W ten sposób naturalnym wydaje się być zastosowanie typowego rozwijanego menu:

Rozwijane menu w przeglądarce Firefox

Z reguły przy pierwszym zetknięciu z nowym menu nie wiemy jak zdefiniować ścieżkę przejść między kolejnymi krokami. Szukamy, przesuwając kursor ponad kolejnymi pozycjami. A co gdyby oddać całą strukturę menu w ręce użytkownika od razu? I pamiętać przy tym  o zasadzie chowania opcji nieadekwatnych do wybranej drogi poszukiwań.

Tak powstało menu będące kompromisem między tradycyjnym statycznym i rozwijanym. Czy to dobry pomysł? Należałoby sprawdzić, wykorzystując testy użyteczności. Na razie pozostawiam ocenę Wam. Oto i wynik mojej pracy: totalnie rozwijane menu z użyciem jQuery.

Testowany pod Firefoxem, Chrome.

 
 
« poprzednie wpisynastępne wpisy »