Cufon czcionki Joomla gospodarzem

Michael Soriano we fragmentach października 13, 2009 70 komentarzy

Jestem wielkim fanem WooThemes. Wydaje się, że za każdym razem wyjdą z tematem - oni przesuwać granice projektowania stron internetowych. Spójrz na ich najnowszej stworzenia: Therapy - Nie mogę pomóc, ale zakochać się w drobnych gradientów tła, płynny foliach i ładne zaokrąglonymi krawędziami. Ale to, co naprawdę lubię o terapii jest to niesamowite, typografia. Powiedziałem sobie: „to doskonałe wykorzystanie sIFR”. Więc kliknięciu prawym przyciskiem myszy na tytule postu, spodziewając się zobaczyć „O Macromedia Flash” wpis - ale nie to zobaczyć. Więc zapytałem mojego mylić siebie: „jeśli to nie jest sIFR, to co jest konwersja cały ten tekst dynamiczny?”

I sprawdzić element Firebug - wtedy widzę span class „cufon” wszędzie.

Więc co w świecie jest Cufon?

Cufon jest definiowany jako „zamiennik tekstu szybko z płótna i VML”. Twierdzi on również, aby być godnym alternatywą sIFR - co jest dla tych, którzy nie są zaznajomieni - oznacza Scalable Inman Flash Replacement. sIFR jest technologia wykorzystywana przez projektantów stron internetowych, aby zastąpić tekst dynamiczny z bezpiecznych czcionek non-internetowych. Chociaż sIFR wykonał porządku robotę z wymianą tekstowej - okazało się dość trudne do skonfigurowania. Użyłem sIFR w kilku projektach w przeszłości i należy przyznać, że nie jest najłatwiej dostać się dzieje. Na dodatek - sIFR wydaje się nieco buggy, a także spowalnia ładowanie stron. Są to poważne konsekwencje, które należy rozważyć w cenie za pomocą unikalnego czcionki dla stron.

Więc poszedł do przodu i próbował Cufon. Ku mojemu zdumieniu, następujące kroki jest wszystko, co potrzeba, aby w pełni „Cufonize” stron internetowych. * Wybaczcie użycie terminu „cufonize” - może to wydawać śmieszne, ale po próbie kroki, Ty też będzie „cufonize” stron.

Krok 1: Pobierz Cufon

Pierwszą rzeczą, którą trzeba się aby pobrać plik JavaScript rdzeń, który jest odpowiedzialny za świadczenie niestandardowej czcionki wewnątrz kodu HTML. Głowa do cufon.shoqolate.com/generate/ i kliknij prawym przyciskiem myszy zakładkę „Pobierz”, - wybierz „Zapisz element docelowy jako ...” Zapisz Cufon-yui.js do lokalnego katalogu w komputerze.

Krok 2: Generowanie czcionkę

Na tej samej stronie co cufon.shoqolate.com/generate/ - kliknij na „Zwykły kroju pisma” pola - i przejdź do żądanej czcionki w komputerze lokalnym.

Resztę pól wysyłania są opcjonalne. Zostawiłem ich wszystkich domyślnych dla dobra czyni ten poradnik krótki. Wystarczy upewnić się, - używasz czcionki, która jest legit w użyciu, sprawdzić off EULA oraz warunki umowy. Kliknij na „Zróbmy ten” przycisk na samym końcu tej strony.

To powinno generować niestandardową czcionkę kodu JavaScript dla Ciebie - w zależności od wyboru czcionki. W moim przypadku, wybrałem coś bardzo un-nadzwyczajnego: Gigi.TTF - który wytwarzany plik o nazwie Gigi_400.font.js.

Śmiało i zapisać ten plik w tym samym katalogu, w którym został zapisany plik rdzenia Cufon-yui.js i jesteśmy gotowi, by zbudować swoją stronę:

Krok 3: Cufonize swoją stronę

Wszystko, co naprawdę trzeba zrobić z tego punktu jest link do tych plików JavaScript w sekcji head kodu HTML. Należy również upewnić się, że cufon-yui.js jest wywoływana przed pliku font.js:

Aby rozpocząć proces wymiany - utworzyć niestandardowy skrypt jak poniżej:

Powyższy skrypt jest mówienie Cufon zastąpić wszystkie znaczniki H3 i P do naszej niestandardowej czcionki.

Zauważ, że jeśli chce się dotrzeć do konkretnych elementów w swojej strony w ten sam sposób można przypisać klas CSS i identyfikatory, trzeba użyć ramy takie jak jQuery, że nie pozwolę ci zrobić coś takiego. Aby pobrać jQuery, przejdź do docs.jquery.com/Downloading_jQuery. Upewnij się, że nie odwołuje się do tego pliku przed bazowych Cufon-yui.js w nagłówku.

Z biblioteki jQuery w miejscu, teraz można wybrać bardziej szczegółowe elementy na stronie (hashtags dla identyfikatorów i okresów dla klas). Patrz przykład poniższy kod:

Powyższy kod będzie Cufonize tylko tagów h3 z identyfikatorem „przerobić-me” i p Znaki z identyfikatorem „przerobić-me-too”.

Wniosek:

To w zasadzie to! To wszystko trwa do użycia dowolnej czcionki chcesz na swoich stronach internetowych. Co lubię najbardziej o Cufon jest to, że jest szybki i działa. Znajdziesz tu również, że ogólne właściwości CSS, takie jak kolor, wielkość i pozycjonowanie nadal obowiązuje na przekształconej czcionki. Aby dowiedzieć się więcej o specyfice Cufon stylizacji - patrz wiki.github.com/sorccu/cufon/styling.

Dużo szacunku do ludzi, którzy stworzyli Cufon. Jestem pewien, że ten wyznacza nowy trend w internetowej typografii. Do ludzi na WooThemes: przeć granice - Twoja praca jest czystą inspiracją dla twórców stron internetowych na całym świecie.

Kto Korzystanie Cufon?

Poniższy wykaz stron internetowych korzysta już zastąpienie tekstu Cufon na swoich stronach:

Międzynarodowa Akademia Rugby

Oswajanie grid - Align swoich postów WordPress doskonale PHP i CSS

Tworzenie jednej stronie Portfel od podstaw - część 1: Photoshop makieta

70 Komentarze

25 października 2009 o 7:18 am

Mam zamiar spróbować cufonize krótko i po prostu zobaczyć swoje wielkie artykuł. Dziękuję za udostępnienie.

28 października 2009 o 11:15

Używam wtyczki WP-Cufon (www.tobias-battenberg.de/wp-cufon/) na dwóch stronach WordPress. Całkiem dobre, ale nie bez skazy. Istnieje niewielkie opóźnienie, gdy strona ładuje się do czcionki, aby pokazać się i „hack” nie wydaje się przykryć. Miałem również problemy z jego pracy na stronie głównej i innych stronach jako temat używałem zakodowanej je inaczej.

Robi to trzy miesiące temu (chcąc za artykuł jak ten) miałem problemy konwersji czcionkę JS myślę, że było. Musiałem zrobić to kilka razy, aby zrobić to dobrze.

Ta strona jest prawie gotowy i można zobaczyć wykorzystanie wolnego Museo_300 czcionki:
lightonsolutions.com/

wyślę Drugi przykład witryny, gdy jest gotowy.

Jeszcze raz dziękuję za artykuł.

28 października 2009 o 12:19 pm

Tak jest! czcionka Museo_300 jest piękne czcionki. Dobra robota!

04 listopada 2009 o 9:40

po prostu chcę wiedzieć, jak stosować „id” i „klasa” w Cufon.

proszę podać w skrócie, a także przykładem Sitor URL.

04 listopada 2009 o 9:56 am

- kierować elementy używając zwykły javascript lub jquery selektorów. I znaleźć drogę jQuery być prostsze.

Na przykład. Powiedzmy, że chcesz cufonize wszystkie tytuły w H3 strony z klasą „podtytuł”, powiedz skrypt: cufon.replace ( „h3.subtitle”)

04 listopada 2009 o 10:02 am

cześć dzięki za odpowiedzi Quik.
ale jakiś problem.

Używam tego code..but nie otrzymuję żadnych zmian.

Cufon.replace ( „h3.subtitle”, textShadow: „2px 2px # 666"
fontSize: „17px”
Kolor: „-linear gradientem (#fff, 0,2 = # FFF, 0,5 = # FFF, #fff)”
najedź: textShadow: „2px 2px # 9d9d9d”,
Kolor: „-linear gradientem (# d4d4d4, biały)”

06 listopada 2009 o 5:25 am

cześć dzięki za odpowiedzi Quik.
ale jakiś problem.

Używam tego code..but nie otrzymuję żadnych zmian.

Cufon.replace (”h3.subtitle”, textShadow: „2px 2px # 666"
fontSize: „17px”
Kolor: „-linear gradientem (#fff, 0,2 = # FFF, 0,5 = # FFF, #fff)”
najedź: textShadow: „2px 2px # 9d9d9d”,
Kolor: „-linear gradientem (# d4d4d4, biały)”

23 grudnia 2009 o 9:31 am

Dzięki za to bardzo przydatny „idiotoodporny” samouczka. Mam klienta, który zadał mi kilka pytań wokół technik zamiennych tekstowych, mam zamiar dać mu link, aby mógł czytać dla siebie.

Przy okazji mogę udostępniać swoje uczucia o WooThemes, mogę być nieobiektywna jak jestem beta testerem dla nich

27 lipca 2010 o 6:30 pm

ładny artykuł!
użyłem Cufon w połączeniu z PHP i jQuery na biuro podróży miejscu niedawna - działa świetnie!
Używałem go projektować dynamiczny tekst na funkcję rotatora i dynamicznych promocji na stronie głównej (shipsandtripstravel.com) i zastosowano wiele czcionek na ich stronie referencje (shipsandtripstravel.com/about/testimonials.html)

28 lipca 2010 o 11:28 am

@Gregg - to jedna strona imponujące. chce mi się podróżować

29 kwietnia 2012 o 2:54 pm

Dziękuję bardzo. Funny znalazłem swój post, bo nie bardzo to samo zrobiłeś ... myślałem czcionka musiała być plik img aż Użyłem narzędzia dla programistów Google i słyszał Cufon po raz pierwszy. Czy nie lepiej używać biblioteki jQuery Google chociaż ??

// Można określić częściowe numery wersji, takie jak „1” lub „1.3”,
// z tym samym rezultatem. Spowoduje to automatycznie załadować
// najnowsza wersja, że ​​częściowe dopasowanie wzorca rewizja
// (przykład 1.3 byłoby załadować 1.3.2 dziś i 1 będzie ładować 1.7.2).
google.load ( „jQuery”, „1.7.2”);

google.setOnLoadCallback (function () // Place Init tutaj zamiast $ (document) .ready ()
>);

Na zdrowie i utrzymać tę wielką treści płynącej!

Steve
Kingston, ON Canada

30 kwietnia 2012 o 9:50 am

Czy ktoś ma problemy z Cufon? I „cufonized” mój czcionki, zrobili wszystko, aby pracować w mojej stronie i nie ... czcionki cufon zmienił wszystko. rzeczy nie są już w odpowiednim miejscu tam są? to się stało, nikomu jeszcze?

05 maja 2012 o 7:16 am

Co cufin czcionki jest terapia przy użyciu?

Powiązane artykuły

Cechy: - Generuje pliki sitemap.xml online za darmo - może przetwarzać nieograniczoną liczbę stron * - Zapewnia Google sitemap / mapa strony XML walidator - Raporty broken links - komplementarne, bez żadnych ...

Dzięki za info Michaelson. Pobrałem Firebug i to jest niesamowite źródło! Udało mi się zlokalizować linię kodu w pliku css. Jednak nowy problem pojawił: the template.css ...

Joomla 2.5 osiągnie koniec życia, jak na 12/31/2014. Należy pamiętać, to może być zagrożenie dla bezpieczeństwa na swojej stronie internetowej. Można wyświetlić więcej informacji na temat końca życia tutaj. Ze względu na ich ...

W Joomla 2.5 / 3, można użyć więcej niż jeden projekt szablon na swojej stronie internetowej. Oznacza to, że można stworzyć stronę internetową z grupami podstron, a nawet poszczególnych podstron, które mają unikalny ...

Czym jest XML File? Extensible Markup Language, lub XML jest jednym z najczęściej wykorzystywanych otwartych formatów do przechowywania, struktury, manipulacji i transportu danych. Jeden z głównych...