Jakiś czas temu na blogu umieściłem wpis traktujący o moim zdaniem genialnym szablonie LightWord do WordPressa i „problemie”, jaki napotkałem podczas próby uzyskania polskich znaków w tytułach wpisów. Tytuły te [oraz kilka innych elementów na stronie], zawdzięczają swój wygląd funkcjonalnościom skryptu Cufon, służącego do podmiany standardowych, typowych czcionek określonych elementów witryny na własne, nawet takie, które nie są obecne w zbiorach systemowych odwiedzającego nas Internauty. W tamtym wpisie potraktowałem temat „po łebkach”, ponieważ sama biblioteka nie była głównym celem. Tym razem naprawiam swój błąd i dokonuję „porządnego” podsumowania funkcjonalności i różnych zagadnień związanych z korzystaniem z Cufona.
„Cufon – czcionki dla ludzi”.
Czym jest sam Cufon? Pozwolę sobie posłużyć się akapitem „About” ze strony projektu w serwisie GitHub:
Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set:
* No plug-ins required – it can only use features natively supported by the client.
* Compatibility – it has to work on every major browser on the market.
* Ease of use – no or near-zero configuration needed for standard use cases.
* Speed – it has to be fast, even for sufficiently large amounts of text.And now, after nearly a year of planning and research we believe that these requirements have been met.
Wersja polska / natywna ;] [tłumaczenie własne]:
Cufón stara się zająć pozycję godnej alternatywy dla technologii sIFR, która pomimo wielu zalet jest bardzo trudna w konfiguracji i użytkowaniu. Żeby osiągnąć tak ambitne cele zostały określone następujące wymagania:
* Brak zewnętrznych wtyczek – biblioteka będzie korzystała wyłącznie z funkcji wspieranych przez przeglądarkę klienta.
* Kompatybilność – narzędzie musi działać na wszystkich głównych przeglądarkach dostępnych na rynku.
* Łatwość użycia – nie będzie wymagana żadna lub prawie żadna konfiguracja dla standardowych przypadków użycia.
* Szybkość – skrypt musi działać szybko, nawet dla znacznych ilości tekstu.W tym momencie, po prawie roku projektowania i eksperymentów wierzymy, że wszystkie powyższe wymagania zostały spełnione.
Myślę, że tym razem wyjątkowo mam niewiele do dodania w kwestii informacji o samej bibliotece. ;]
„Strona serwera”, czyli co „siedzi pod maską”.
Jak to działa? Pomimo tego, że dokładny opis mechanizmów stojących za tak zaawansowaną funkcjonalnością jest dosyć trudny, samo omówienie schematu działania da się już przedstawić w miarę przystępny sposób. A zatem:
Pierwszym etapem jest przetworzenie pliku czcionki [w formacie TTF, OTF i podobnych] na format SVG korzystając z wolnego narzędzia FontForge. W tym momencie wszystkie znaki dostępne w czcionce są zapisane w formie grafiki wektorowej. Następnie dane są konwertowane do postaci ścieżek VML, który to język jest obsługiwany bezpośrednio przez Internet Explorera, przez co możliwa jest bezproblemowa obsługa czcionek Cufona przez tą przeglądarkę. Ostatnim etapem jest eksport ścieżek VML do formatu JSON, w którym to otrzymujemy gotowy plik skryptu JavaScript rejestrujący naszą czcionkę w bibliotece.
Proste, prawda?
Przekonałeś mnie, chcę spróbować. ;]
Aby skorzystać z dobrodziejstw biblioteki Cufon, należy wykonać kilka bardzo prostych kroków. Pierwszym i oczywistym jest znalezienie czcionki, którą chcemy „przerobić” i zdobycie odpowiednich plików – ważne: sprawdźcie dokładnie licencję, bo nie każdy font można wstawić w ten sposób. Następnie uruchamiamy w przeglądarce stronę generatora skryptów czcionek pod odpowiednim adresem. Tutaj w pierwszym bloku wybieramy odpowiednie pliki i potwierdzamy, że mamy prawo do ich przetworzenia. W drugim należy wybrać zestaw znaków, jaki będzie nam potrzebny, można też zaznaczyć po prostu pierwszy checkbox, co spowoduje włączenie wszystkich dostępnych znaków – będzie to jednak spore obciążenie, ponieważ plik wynikowy potrafi wtedy osiągnąć rozmiar kilkuset kB. W ostatnim bloku zaznaczamy checkbox potwierdzający naszą znajomość i zgodę na warunki korzystania z usługi i… „Let’s do this!„. ;]
Mając gotowy plik możemy przystąpić do podmiany czcionek na naszej stronie internetowej. Aby to zrobić musimy w znacznikach <script> wstawić kolejno skrypt Cufona, skrypt czcionki oraz kod aktywujący silnik biblioteki na odpowiednich elementach witryny. Gotowy „skrawek” kodu wygląda następująco:
<script src="[plik Cufona].js" type="text/javascript"></script>
<script src="[plik czcionki].js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace(['[elementy DOM, które chcemy podmienić]'], { fontFamily: '[nazwa użytej czcionki]' });
</script>
Na moim blogu wygląda to następująco:
<script src="http://blog.kowalczyk.cc/wp-content/themes/lightword/js/cufon.js" type="text/javascript"></script>
<script src="http://blog.kowalczyk.cc/wp-content/themes/lightword/js/extra_mp.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace(['h1','h2'], { fontFamily: 'Myriad Pro' });
</script>
Jak widać, cały proces upiększenia czcionek na naszej stronie sprowadza się do wstawienia trzech linijek kodu. Ktoś proponuje prostsze rozwiązanie? ;]
Problem z polskimi znakami.
Zauważyłem, że bardzo dużo osób jest kierowanych z wyszukiwarek internetowych do mojego bloga na hasła związane z wyświetlaniem polskich znaków przy użyciu Cufona – wpis o szablonie LightWord, który ma z tym niewiele wspólnego, ma zadziwiająco wysoką pozycję w Google. Stwierdziłem więc, że skoro tyle osób ma z tym problem, to skrobnę nieco i o tym, żeby Internauci nie frustrowali się tym, że czytają moje wypociny a rozwiązania… nie ma. Pozwolę sobie wyrazić to w formie apelu:
Czytelniku!
Jeśli czcionka nie zawiera polskich znaków, to jakkolwiek byś się nie starał, jakkolwiek byś nie prosił / błagał – generator nie umieści ich w pliku wynikowym, a sam Cufon zauważając znak nie występujący w skrypcie czcionki po prostu go pominie. Dlatego jedynym rozwiązaniem jest znalezienie takiego fontu, który zawiera polskie / jakiekolwiek inne pożądane znaki. Jeśli już masz takowy, nie zapomnij zaznaczyć w generatorze odpowiednich opcji pozwalających na włączenie ich do skryptu wynikowego. Jeśli postąpisz poprawnie według tych reguł – nie ma możliwości, żeby polskich / innych pożądanych znaków nie było. Dziękuję za uwagę! ;]
Podsumowanie.
Cóż mogę rzec w podsumowaniu? Cufon to zarówno „fajna zabawka”, jak i potężne narzędzie, dzięki któremu można tworzyć strony o naprawdę unikalnym wyglądzie, przyciągające oko potencjalnych klientów. Od strony programisty również nie mam nic do zarzucenia tej bibliotece – szybkość i funkcjonalność jaką oferuje stoi na najwyższym poziomie. Co najważniejsze – to nie jest Flash! Co to oznacza? Mianowicie – wraz z ładnym wyglądem nie tracimy możliwości zaindeksowania treści przez wyszukiwarki, mamy też możliwość swobodnego podejrzenia źródła – jesli ktoś chce zobaczyć jak dokładnie wygląda kod tworzony przez Cufona, trzeba będzie „niestety” posłużyć się FireBugiem, ale myślę, że większość „żądnych wiedzy” użytkowników uczyni to z miłą chęcią.
Dziękuję za lekturę i zapraszam do podzielenia się swoimi opiniami na temat podmiany czcionek na stronach internetowych, nie tylko poprzez opisaną wyżej bibliotekę. Do zobaczenia w kolejnym wpisie! ;]
Warto przeczytać.
Trwa ładowanie…
Bardzo praktyczne i klarownie napisane. O tak! Jest wiele fontów, z których dobrodziejstwa mają przyjemność korzystać blogerzy piszący po angielsku. Wiele czcionek przychodzi nam ze smutkiem skreślić z listy przez to, że nie mają polskich ogonków. Jeśli ktoś ma odlot na punkcie czcionek odręcznych, na punkcie czcionek aspirujących do stylu grunge, to troszkę zachodu będzie go kosztować znalezienie tej jedynej i pięknej i obsługującej polskie znaki. W podsumowaniu wspomniałeś o eliminacji Flasha. I dzięki Bogu, że istnieją takie rozwiązanie, bo jak słyszę słowo „Flash” to mnie strząsa. Dzięki za ten wpis. Wykorzystam go praktycznie, w niedalekiej przyszłości.
Pingback: warstwycom: Cufon i polskie znaki: blog.kowalczyk.cc/ | flaker.pl
Ja z Cufonem miałem już wcześniej do czynienia, ale dopiero podczas grzebania przy tym szablonie zobaczyłem jakie to proste i przyjemne, dlatego ostatnio używam go coraz częściej. Co do Flasha – technologia nie jest zła, ale z punktu widzenia usability dla użytkownika powinna być skreślona. Zastanawiam się nad wyrzuceniem tej chmury tagów z WP-Cumulusa, bo też w sumie nie jest zbyt czytelna.
Oj, tego typu chmury tagów też nie lubię. Ale są gusta i guściki. Zraziłem się do Flasha przy projektowaniu większej strony, która zgodnie z wybrykiem klienta MUSIAŁA w tym Flashu być zrobiona i koniec:) Brakowało mi chociaż takich rzeczy jak support dla większej ilości tagów html, nie pamiętam dokładnie o co chodziło, ale miałem problemy, bo projekt wymagał tabelek itp.
Za to ja z Cufona nie używałem jeszcze. Jakiś czas temu wykorzystanie Cufona zrobiło się dość popularne i szukałem informacji o tym, dlaczego nagłówki, na niektórych blogach są tak piękne.
W każdym razie fajny post. Puściłem go na flakera, zaraz jeszcze na blipa i Facebooka go dodam.
Tak więc mam kolejny argument, żeby jednak coś z tym zrobić. Dziękuję za bardzo aktywną promocję wpisu. ;]
A za promocję nie ma co dziękować. Wpis mi się podoba. Mam naturalny odruch promocyjny wykształcony dzięki Twitterowi. Tam też wrzuciłem linka.
Ja mam naturalny odruch podziękowania za coś, co w jakiś sposób dostaję dzięki czyjejś uprzejmości, wykształcony przez rodziców. ;]
Teraz pozostaje mi tylko przyjąć te tysiące odwiedzających – dobrze, że mam na blogu zainstalowany WP Super Cache. ;]
Tak, żeby tylko te teoretyczne tysiące zechciały klikać w coś interesującego, zamiast w szeroko pojętą płyciznę. Mniejsza o większość. Wpis jest konkretny, zrozumiały i pożyteczny, a to się ceni.
Z tym jest pewien problem, no ale cóż, niestety programowanie w skali globalnej jest sportem dosyć niszowym. Może dzięki aktywności takich ludzi jak my coś się zmieni w tej kwestii. Dzięki jeszcze raz. ;]
dzięki za wpis :) przydał się
Możesz to trochę rozwinąć? Do czego się przydał, jak z niego skorzystałeś, co wykonałeś – czytelnicy są na pewno ciekawi. ;]
Witam
Gratuluję! Wspaniały wpis. Jestem laikiem, może dlatego cieszę się, że coś takiego znalazłem, bo udało mi się to co chciałem pozmieniać. Przyznam szczerze siedziałem nad tym problem 2 dni, rozmawiając z informatykami, ale … nic.
Oczywiście kombinowałem w różnych programach (np. gżegżółka) nad UTF-8 i ISO i wyświetlało, ale nie w nagłówku.
Wtedy natrafiłem nad ten artykuł, no coś wspaniałego :-) Udało się, za co z góry autorowi bardzo dziękuję.
Jednak mam kilka zastrzeżeń, raczej dla początkujących, którzy to będą czytali. Po pierwsze rozumiem, że musi być jasno wytłumaczone co po kolei robić, stąd pewnie w artykule jest napisane o pogramie FontForge.
Przyznam, że będąc początkujący w tej dziedzinie, na początku się nie potrzebnie przeraziłem, ale pomału zacząłem realizować punkty. I tutaj nastąpił problem, myślałem, że muszę najpierw zainstalować ten program, a dopiero później wstawić plik w generator. Oczywiście byłem w błędzie, ale myślę sobie, że dobrze by było bardziej rozdzielić, że to jest tylko tłumaczenie tego co się dzieje z plikiem, że nie trzeba instalować FontForge.
Program faktycznie darmowy, ale zainstalować go to masakra. Oczywiście nie dla speca. Najpierw aby go odpalić musiałem ściągnąć program cygwin, który waży ponad 675 MB!! Nie da się bez niego instalować fontforge, no.. może się da, ale ja nie wiem jak. Przyznaję, przeszukałem internet i znalazłem, że cygwin (lub podobny program) jest potrzebny do instalacji FontForge.
Dlatego to piszę, bo może wielu początkujących popełni ten sam błąd – nie trzeba instalować FontForge!
Drugi błąd jaki popełniłem to nie zaznaczyłem pierwszego checkboxa, tylko podstawowy, który jest domyślnym. Jak wstawiłem plik na stronę i poprawiłem skrypt, nic nie dało. Dopiero wybór najbardziej rozbudowanej wersji checkboxa (All) dało pożądany efekt.
Naprawdę wielkie wielkie dzięki, wspaniały wpis :-)
Dziękuję za miłe słowa. ;]
Jeśli chodzi o samego Cygwina, to bez przesady, u mnie instalacja z dosyć sporą liczbą pakietów zajmuje ~300MB. Można zainstalować same „potrzebne” rzeczy, nie trzeba zaznaczać wszystkiego. ;]
A co do samego artykułu, to wydawało mi się, że w miarę jasny jest rozkład akapitów i to, że jeden z nich nazywa się „Przekonałeś mnie, chcę spróbować” oznacza, że dopiero od tej chwili zaczynamy zabawę, a kończymy teorię, którą wyłożyłem „po stronie serwera”.
Niestety, ciągle coś jest jednak źle. Już się ucieszyłem, myślałem, że wszystko jest ok. Testowałem swoją stronę z tekstem w nagłówku: Pomagamy ążźć i jak to miałem, wszystko było ok.
Teraz chciałem wszystko normalnie pozmieniać i wstawić tekst, np. wspieramy sprzedaż. A tu zonk, nie da rady, znowu się ż nie wyświetla. Co ciekawe jak zrobiłem spację pomiędzy sprzeda ż, znak ż jest widoczny. Znika jak się dołącza go do zwykłego tekstu. Tak samo z innymi polskimi znakami. Znaczki mają manię wielkości i wolą być same? ;-)
Co się dzieje? Dlaczego tak to robi? Zauważyłem, że czcionka jest troszkę większa, dlaczego? A jest ta sama co inne: „Lucida Grande”.
Masakra z tymi czcionkami, człowiek oczopląsu dostaje :-( Ma ktoś może pomysł? Co zrobiłem nie tak?
Chętnie pomogę, ale najlepiej byłoby gdybyś podrzucił link do stronki, nad którą pracujesz, wtedy mógłbym zobaczyć co robisz źle, bo z Twojego opisu niestety niewiele wynika. Nie potrafię z tego komentarza „wyciągnąć” jakiegoś konkretnego błędu, musiałbym to po prostu zobaczyć. Jeśli stronka jest w jakikolwiek sposób „prywatna” – podeślij mi adres na maila, nie musisz publikować go w komentarzu.
Ok, podsyłam, naprawdę wielkie dzięki. Efekty dlaczego tak się dzieje, można opisać tutaj, ale linka wolałbym podać mailem.
Odpisałem Ci na maila. Problem polega na tym, że masz wrzucony w sekcji
drugi font dla Cufona i on jest brany pod uwagę, a nie ten pierwszy. Niestety jest to trochę wybredna biblioteka, więc musisz kontrolować co dokładnie ładujesz i raczej powinno być to tylko tyle, ile potrzeba.UDDDAAAAŁŁŁOOO SIĘĘĘĘĘ!!!
Wreszcie!!!, już piszę jak. Napisałeś, że to jest inny font, dałeś linka, przeczytałem go, okazało się, że Anivers posiada polskie znaki. Pobrałem paczkę i zacząłem kombinować z nią.
Najpierw zrobiłem kroki te które podałeś w tekście. Przy generowaniu czcionki js zauważyłem, że ma taką samą dokładnie nazwę, jak moja w pliku js na serwerze z tą różnicą, że więcej „waży”. Dlatego najpierw spróbowałem normalnie ją podmienić, ale to nic dało. Następnie dorzuciłem skrypt opisany w artykule. Też nic nie dało.
Na końcu zostawiłem Anivers.400 (tak się nazywał) ten oryginalny, który był w szablonie, zmieniłem nazwę swojego pliku na zwykłe Anivers i wrzuciłem do katalogu js na serwerze. Czyli były dwa anivers. Dodałem skrypt, opisany przez Ciebie i wyrzuciłem ten, który opisałeś w mailu. Efekt – działa!
Działa!! Super, Wielkie wielkie dzięki.
Jeśli można mam jeszcze trzy pytania: Jak znalazłeś że to anivers, przecież jak sprawdzam firebug-iem, to pokazuje, że całość jest Lucida. Jak dokładnie sprawdzić jaka to czcionka?
Drugie pytanie dot. szukania i ściągania czcionek, jak dokładnie sprawdzić te uprawnienia o których piszesz w artykule? Chodząc po stronach widzę, że wiele jest płatnych. O co chodzi dokładnie z tą licencją? Chodzi o zakup ich, czy coś innego?
Znacie jakieś dobre strony z dużym wyborem czcionek polskich?
Magia i doświadczenie. ;] Po prostu widziałem, że to nie Lucida. Niedawno też pomagałem innemu „koledze po fachu” z Cufonem i ta czcionka wydawała mi się zbyt podobna do tamtej, a „standardowe kroje” [Arial, Times i podobne, w tym Lucida] mają to do siebie, że nie wyglądają zbytnio „fikuśnie”. Tutaj działa tylko i wyłącznie doświadczenie, bo z kodu faktycznie wygląda na to, że powinna być Lucida, ale oczu nie oszukasz. ;]
Co do uprawnień – po prostu trzeba spełnić warunki licencji, zwykle razem z plikiem fontu jest dołączany jakiś „license.txt”, w którym jest napisane w jaki sposób możesz go użyć, czy może zostać skonwertowany, czy wymagają opłaty, itp.
Cieszę się, że mogłem pomóc i zapraszam ponownie na mojego bloga. Ja tutaj głównie jestem po to, żeby rozwiązywać problemy, więc dobrze trafiłeś. ;] Może w przyszłości ktoś zechce mnie zatrudnić przy rozwiązaniu jakiegoś „problemu” z brakiem własnej strony internetowej? ;]
Im więcej takich blogów tym lepiej :-) Dzięki temu można dużo się nauczyć. A co do zleceń, to może być różnie, prawda jest taka, że taka pomoc szybko się rozchodzi, więc kto wie…
Serdecznie pozdrawiam wszystkich
Cieszę się, że Ci się podoba, taki właśnie jest cel – żebyś mógł poznać szybko rozwiązanie i zrozumieć dlaczego tak jest, a nie musiał sam rozgryzać problemu. ;]
A tak na marginesie, z tego co na końcu widzę, to okazało się, że nagłówki były w pisane czcionką Anivers, a reszta zwykłego tektu Lucida, stąd tyle zamieszania.
Ja ze swojej strony pragnę dodać, że dwie fajne listy nowoczesnych fontów obsługujących polskie znaki zostały opublikowane na blogu creatyna. Wygooglujcie sobie. Może być przydatne wszystkim, którzy chcą korzystać z Cufona.
Nie mam zbyt restrykcyjnej polityki dotyczącej zamieszczania linków w komentarzach, więc w miarę możliwości poprosiłbym o wstawienie odpowiedniego URLa. ;]
Czyli jak widzisz, jednak oczy pomagają. ;]
Właśnie nie byłem pewien jak do tego podchodzisz:-) Po Twoim wpisie szukałem fajnych fontów z polskimi ogonkami, no i wpadłem na te dwie listy. Jako, że to jest związane z tematem posta, podrzucam namiary:
http://www.creatyna.pl/2010/02/najlepsze-czcionki-dla-designerow-z.html
http://www.creatyna.pl/2009/10/najlepsze-fonty-z-polskimi-znakami.html
Może czytelnikom się przyda przy montowania „Kulfoników” :-)
I o to chodzi, rozwiązujemy kolejny problem – jest fajnie. ;]
Oba linki zostały podane przez kolegę adone, także spójrz jeden komentarz wyżej. ;]
Ja ze swojej strony pragnę dodać, że dwie fajne listy nowoczesnych fontów obsługujących polskie znaki zostały opublikowane na blogu creatyna. Wygooglujcie sobie. Może być przydatne wszystkim, którzy chcą korzystać z Cufona.
Witam po dłuższej przerwie.
Mam pytanie, chodzi mi o stronę http://www.elegantthemes.com/preview/DelicateNews/
Tam jest użyty cufon, ale jaka to dokładnie czcionka? Czy są może do niej polskie znaki? Chodzi mi oczywiście o tekst: Nulla aliquam quam non commodo.
Byłbym wdzięczny za jakąkolwiek podpowiedź.
Serdecznie pozdrawiam
Wystarczyła krótka lektura źródła strony, żeby zidentyfikować dwa fonty użyte w Cufonie:
Raleway: http://imjustcreative.com/raleway-font-free-open-source-font-for-download/2010/02/21/
League Gothic: http://www.theleagueofmoveabletype.com/fonts/7-league-gothic
Ta, której szukasz to Raleway.
Wielkie dzięki
ale chyba nie ma polskich znaków do tych czcionek :/
No niestety, ale mam nadzieję, że znajdziesz jeszcze czcionkę z polskimi znakami, która Ci się spodoba. ;]
Szukam polskich czcionek do cufona: http://www.elegantthemes.com/preview/DeepFocus/ chodzi dokładnie o „Imagery is my life and life…” U mnie działają litery ół, a takie jak ęąż nie działają. Jaki tam jest użyty cufon?
A właściwie jak się sprawdza jaki to cufon. Używam chrome i robię badaj stronę, widzę wszystko ale nie mogę znaleźć nazwy cufona, Tomek jak to robisz?
Z góry dziękuję za odpowiedź.
Ta czcionka to Collaborate Thin: http://www.fontsquirrel.com/fonts/Colaborate . Jeśli zmieniają się jedne litery a inne nie, to niestety ta czcionka ich po prostu nie ma. Cufon jest cały czas ten sam, tylko plik czcionki się zmienia. Żeby sprawdzić, jaka to czcionka, musisz poszukać elementu „script” w kodzie strony, który będzie zawierał charakterystyczny kod czcionki dostosowanej do niego. Potem patrzysz na nazwę tego pliku, która zwykle jest taka, jak nazwa czcionki, Google i odpowiadasz Czytelnikowi spragnionemu wiedzy. ;]
wielkie dzięki, szczególnie z tym „script”, faktycznie znalazłem. Strasznie trudno znaleźć, masakra :-)
Jeśli chodzi o czcionkę, to jeśli nie ma polskich znaków, to bym najchętniej zmienił. Mam plik js czcionki anivers (już przerobiony, dzięki tej stronie kilka miesięcy temu :-)), która może pasować, dużo roboty jest z podmienieniem czcionki?
dobra, trochę poszedłem na skróty ;-).
Zamiast cudować i zmieniać skrypty, to po prostu wyrzuciłem skrypt js z colaborate, a wstawiłem anivers z polskimi znakami nazywając go colaborate.
Mam nadzieję, że tak może być :-)
ostatnie pytanie: gdzie są jakieś fajne strony z polskimi czcionkami, które można wrzucić jako cufon? Może są jakieś większe portale, albo „centrum czcionek”? :-)
Nie ma sprawy, zawsze do usług. Podmiana nie wymaga wielkiej pracy – trzeba tylko podmienić plik czcionki w kodzie i ew. odpowiednią deklarację w Cufon.replace();
Jeśli działa, to może być – pamiętaj tylko, żeby potem poprawić już tak porządnie, bo będziesz się na pewno denerwował i szukał, jak znowu coś przyjdzie zmienić.
Popatrz na wpis kolegi @adone nieco wyżej, wstawił tam dwa bardzo ciekawe linki. Ja zwykle przeszukuję Google i różne katalogi czcionek, niestety nie polecę Ci niczego konkretnego.
jeszcze raz wielkie dzięki – ten wpis o cufon-ie jest już chyba kultowy :-)
Twoja postać też jest kultowa – zostawiłeś tu najwięcej komentarzy. ;]
Lepiej jest stosować czcionki zagnieżdżone w CSS za pomocą @font-face, nie trzeba stosować javascript-u czy flash-a. Czcionki do odpowiednich formatów można skonwertować na stronie http://onlinefontconverter.com/
Tutaj niestety nie mogę się zgodzić, bo @font-face jest „mocno średnio” obsługiwany przez starsze przeglądarki. Jeśli możemy je pominąć, to ok, w przeciwnym wypadku polecałbym jednak Cufona.
W którym pliku dokładnie mam dodać kod ze skryptami ?
Gratuluję, napisałeś pięćsetny komentarz na moim blogu. ;]
Co do pytania: nie tyle w pliku, ile w sekcji „head” każdej strony – jeśli gdziekolwiek wrzucasz kod nagłówka strony to tam właśnie powinny się znaleźć skrypty Cufona.
Jest przewidziana jakaś nagroda dla pięćsetnego komentarza :)?
A tak na poważnie jak zrobić, żeby ten kod dodać raz i zapomnieć o kolejnym dodawaniu ?
Jeśli klikniesz „odpowiedz” pod pierwszym komentarzem w wątku, to wszystko będzie połączone, także polecam. ;] Za pięćsetny komentarz nagrodą jest uściśnięcie ręki i własnoręczna odpowiedź na pytanie od autora bloga. ;]
Jeśli gdziekolwiek w skrypcie masz plik generujący nagłówek strony, czyli to, co będzie znajdowało się pomiędzy znacznikami „head”, to „jesteś w domu” -> musisz wstawić elementy „script” właśnie tam.
To może inaczej, mój motyw jest dokładnie taki sam jak twój powiedz mi do ilu plików i których musiałeś dodawać scrypt?
Do żadnego – masz to w opcjach LightWorda: Motywy > Ustawienia LightWord. Wystarczy, że tam odblokujesz w drugim polu od góry -> „Ustawienia główne” odpowiednią pozycję [u mnie jest to "Extra"] i zmiana czcionki sama Ci się włączy. Jeśli jednak chcesz sam pokombinować, to plik header.php na pewno Ci się przyda. ;]
Zakładam, że u mnie jest to „Additional header content, including scripts, etc”. Mam jeszcze jedno pytanie jak czytałem komentarze to kolega Marek napisał, że nie trzeba instalować FontForge czyli mam rozumieć, że nie muszę przerabiać pliku OTF. Wystarczy, że wygeneruje dla niego scrypt ?
Nie, pliki Cufona wraz z gotowymi źródłami dla Bistream Vera Sans w najnowszej wersji LightWorda [ja korzystam ze starszej, bo wolę Myriad Pro, a nie mam czasu siedzieć nad zamianą] masz już w pakiecie, wystarczy je odblokować w ustawieniach szablonu. Swoją drogą z tego co widzę, to już masz tą czcionkę ustawioną, także nie rozumiem, co dokładnie chcesz zmienić. Może trochę rozjaśnij jaki chcesz osiągnąć efekt. ;]
Chciałbym mieć widoczne w tytułach polskie znaki.
Musisz się upewnić, że Bitstream Vera Sans ma polskie znaki. Pozwoliłem sobie sprawdzić to własnoręcznie, żeby oszczędzić Ci pracy i z tego co widzę, to jednak będzie spory problem:
http://www.dafont.com/font.php?file=bitstream_vera_mono&page=1&nb_ppp_old=10&text=%26%23261%3B%26%23263%3B%26%23281%3B%26%23322%3B%F3%26%23324%3B%26%23347%3B%26%23380%3B%26%23378%3B&nb_ppp=10&classt=alpha
Bo polskich znaków w niej po prostu nie ma. Sugerowany zastępnik to fonty z rodziny DejaVu:
http://en.wikipedia.org/wiki/DejaVu_fonts
Zdają się one posiadać wszystkie wymagane znaki, a z konwersją do Cufona chyba sobie poradzisz przy użyciu wpisu powyżej. ;]
Wybrałem czcionkę jak poniżej:
http://www.dafont.com/mentone.font
i teraz pytanie czy tak jak napisał Marek nie trzeba instalować FontForge i nie muszę przerabiać pliku OTF. Wystarczy, że wygeneruje dla niego scrypt ?
Coś nie mogę otworzyć tej strony, aczkolwiek jeśli jesteś w stanie ściągnąć plik czcionki to nie musisz go nigdzie konwertować – narzędzie, które podałem we wpisie samo poradzi sobie z plikiem i wyrzuci na wyjście gotowy skrypt JavaScriptu, który podpinasz pod kod.
Scrypt już wygenerowałem teraz jeszcze upewnij mnie, że w dobrym miejscu chcę go dodać: czyli do Motywy > Ustawienia LightWord. odblokować -> „Ustawienia główne” i wpisać do -> „Additional header content, including scripts, etc”?
Ja bym to wklepał bezpośrednio do kodu, ale jeśli chcesz, to tak, wydaje mi się, że właśnie tam powinieneś wstawić odpowiedni element „script” i kod. Musisz tylko odpowiednio okodować wyświetlanie, bo Cufon sam nie załapie tego. Najlepiej podmień tylko na serwerze pliki skryptu czcionki, wtedy wszystko przejdzie bezproblemowo.
Który to będzie plik ?
Jeśli nic nie grzebałeś na własną rękę, to najprawdopodobniej będzie to: vera_extra.font.js, jeśli jednak takiego nie znajdziesz, to jakikolwiek inny kończący się na .font.js. Zrób sobie przy okazji kopie, w razie, gdyby coś nie poszło. ;]
Jeszcze nic nie grzebałem, znalazłem plik wordpress\wp-content\themes\lightword\js\vera.font.js mój wygenerowany plik to Mentone_Lig_600.font.js zmieniłęm mu nazwę na vera.font.js i skopiowałem na serwer i wygląda, że śmiga :)
Wielkie dzięki za pomoc, bardzo mi pomogłeś.
Serdecznie pozdrawiam
Nie do końca: w kodzie masz coś takiego – „fontFamily: ‘Vera’”, w tym momencie Twoja czcionka wcale się nie wyświetla, bo Cufon jej nie widzi, musisz zmienić deklarację na „fontFamily: ‘Mentone’”, albo usunąć ją w ogóle, wtedy Cufon zastosuje ostatnią zarejestrowaną.
Jeśli naprawisz ten błąd, będzie już ok. Wymagało to kilkunastu komentarzy, ale cieszę się, że udało nam się uzyskać dobry efekt końcowy. ;] Przyszli czytelnicy będą mieli o wiele łatwiej. ;]
W którym pliku jest ten kod ? Wiem, że to może głupie pytanie, ale ja tego nie ogarniam :).
Ten plik to header.php, już wspominałem o nim w jednym z komentarzy.
Nie widzę tego w kodzie header.php poniżej cały kod:
Zlokalizuj linijkę:
Ona odpowiada za wstawianie kodu Cufona. Musisz albo zedytować plik szablonu i wstawić swój kod pod tą linijką, albo wstawić w pole w adminie w ustawieniach LightWorda i tam wkleić odpowiednie znaczniki „script”.
Dodałem coś takiego:
Cufon.replace(['h1','h2'], { fontFamily: ‘Mentone’ });
ale dla mnie się teraz nic nie zmieniło.
Chyba ciężko będzie nam się dogadać, więc zaproponuję Ci następujące rozwiązania: albo dasz mi dostęp do jakiegoś FTP / SSH, żebym mógł wyedytować odpowiednio kod oraz ustawienia i wstawić pliki tam gdzie trzeba, albo spakuj swój szablon i podeślij mi mailem – znajdziesz na stronie Kontakt, wtedy sam to zrobię i odeślę Ci „gotowca”.
„Chyba ciężko będzie nam się dogadać, więc zaproponuję Ci następujące rozwiązania: albo dasz mi dostęp do jakiegoś FTP / SSH, żebym mógł wyedytować odpowiednio kod oraz ustawienia i wstawić pliki tam gdzie trzeba, albo spakuj swój szablon i podeślij mi mailem – znajdziesz na stronie Kontakt, wtedy sam to zrobię i odeślę Ci „gotowca”.
To się nazywa pomoc. Naprawdę super! Oj, aby więcej było takich ludzi w sieci.
aż… ja się tak przyssałem do tego wpisu…. ;-)
właściwie nie wiedzieć czemu :-)
Cóż, cieszę się, że Ci się podoba – ja po prostu lubię to co robię i skoro się już na tym znam, to lubię pomagać innym – proste. ;] Najpierw idee, dopiero potem ewentualne zyski – wybrałem tą branżę z powołania, nie [tylko] dla zysku. ;]
Chyba jednak kolega @yogi wyprzedził Cię w liczbie komentarzy. ;] Nie to, żebyście się ścigali, albo coś, tak tylko mówię. ;] Swoją drogą co do Twojego komentarza wyżej – @yogi miał trochę więcej problemów niż Ty, stąd zaoferowałem mu bezpośrednią pomoc [przy okazji której tez wymieniliśmy około 20 maili ;]] – Ty poradziłeś sobie sam, tylko Cię ukierunkowałem i wskazałem informacje. ;]
20 maili to lekko powiedziane, jeszcze raz wielkie dzięki :)
Nie ma sprawy – ponadto dzięki Wam w końcu włączyło mi się stronicowanie w komentarzach, także mam cenny post do testowania tej funkcjonalności. ;]
Gdybyście potrzebowali czegoś… to wiecie, co robić. ;]
No właśnie to stronnicowanie coś nie działa jak klikam Nowsze Wpisy to pokazuje mi pierwsze wpisy czyli tak naprawdę starsze :) a jak wybiorę Starsze Wpisy to pokazuje te najnowsze czyli w tym przypadku mój :)
Stronicowanie działa, tylko tłumaczenie szablonu jest niepoprawne – swoją drogą jak zobaczyłem jak działa to stronicowanie, to przestraszyłem się, że nikt tego w ogóle nie zauważy, ale jednak. ;] I tak będę musiał popracować nad tym, ew. zainstalować jakąś wtyczkę do „porządnego” wyświetlenia całej paginacji.
Do tej pory męczę się z czcionkami przez css’a ale po prze konwertowaniu do .eot czcionka traci polskie znaki, w .otf’ie posiada wszystkie polskie znaki. I właśnie natrafiłem na Twój artykuł i mnie zaciekawił i mam chęć skorzystania z tego rozwiązania, ale mam pytanie czy istnieje możliwość połączenia dwóch czcionek?
Oczywiście, że jest taka możliwość, wystarczy, żeby tekst był zawarty w znacznikach o różnych selektorach lub w czymkolwiek innym, co odróżni je w drzewie DOM, np.:
wtedy możemy wykonać kod Cufona, podając odpowiednie parametry fontFamily:
Cufon.replace(['span .verdana'], { fontFamily: 'Verdana' }); Cufon.replace(['span .arial'], { fontFamily: 'Arial' });i gotowe. ;]
Rozumie. Widzę, że zastosowałeś czcionkę którą i ja chcę użyć tylko, że Myriad Pro składa się z kilku formatów .otf mam namyśli bold, italic, regular, itp. jak ty rozwiązałeś tą kwestie, jeśli możesz powiedzieć.
O to się nie bój – jeśli będziesz miał w jednym pliku zawarte wszystkie rodzaje tej czcionki [regular, bold, italic, itp.] Cufon sam będzie wiedział co zrobić z wyświetleniem odpowiedniej wersji – wystarczy, że nadasz odpowiednie atrybuty dla tekstu w CSS, czyli np. font-weight: bold;.
Świetny tekst. Dzięki, dobry człowieku ;)
Świetny komentarz. Dzięki, dobry Czytelniku. ;]
Witaj,
myślę nad zakupem themu do WP jednak przyszła mi do głowy myśl odnośnie kodowania znaków. Okazało się, że miałem nosa w tempalcie pod WP http://www.diaboliquedesign.com/demo7/products-page/electronics/super-camera/ w topie używana jest czcionka np.:”Audio” „Cell Phones” nie obsługująca polskich znaków.
Tu się zrodził problem, co zrobić by było dobrze. Można gdzieś takie w przystępnej cenie zakupić, albo „przetranslatorować” by wyświetlały polskie znaki, ktoś się tym zajmuje?
W necie wyczytałem, że niektórzy dorabiają w Corelu ogonki i jest git, tyle że rodzi się kolejne pytanie czy font z zapodanego powyżej linka to aby na pewno Cufon. On zdaje się nie ma aż takich możliwości gradientu w czcionce, a tą czcionką jest css.
W sumie się nie znam, chcę kupić templat i jakie człowiek przy okazji musi problemy rozwiązywać. Niby wystarczy „Buy” kliknąć i kupić, bujdy. W Europie narodów z mnóstwem języków takie rzeczy… heh, może jakiś pomysł ;)
No niestety, jak to mówią: „polska język, trudna język” i przez te ogonki mamy sporo pracy. Na szczęście dziedzina w której siedzę [siedzimy? ;]] ma bardzo fajną właściwość – wszystko jest możliwe. ;]
Czcionka wykorzystana na stronie została umieszczona przez Cufona – sprawdziłem. Jeśli chcesz dokładnie ją na stronie, to musisz najpierw sprawdzić, czy licencja pozwala na samodzielne edytowanie pliku czcionki – w końcu z czegoś musisz wygenerować skrypt dla Cufona. Znajdź plik tej czcionki i jeśli to możliwe, daj jakiemuś grafikowi, który sobie z tym poradzi, a jeśli nie, to jest w Internecie trochę programów do edycji plików TTF, OTF i im podobnych, więc jest możliwość, żebyś sam mógł to zrobić, np. używając znaku przecinka.
Ja w takim przypadku poszukałbym jednak innej czcionki, najlepiej darmowej i po prostu podmienił skrypt dla Cufona. Z tego, co widzę, to nieźle wyglądałaby np. Raleway – jest „cienka”, ale trochę kanciasta.
Linkdump 29- PHP Hypertext Preprocessor
No dobrze, ale ten również nie obsługuje polskich znaków.
Co do fontu z linka jest nim Geo Sans Light, z tego linka http://www.fonts4free.net/geo-sans-light-font.html wynika że jest na licencji FREE czyli mogę zlecić komuś do grzebania w nim :) – tylko czy to jest możliwe jeśli czcionka nie koduje polskich znaków. Może muszę poszukać jakiejś podobnej czcionki zrobionej w UTF-8 i zlecić dorobienie tych ogonków ąę…
Faktycznie, przepraszam, tak jakoś mi się skojarzył.
Oczywiście, że taka zmiana jest to „technicznie” możliwa – każda czcionka ma zapisaną określoną ilość „slotów” ze znakami pod konkretnymi identyfikatorami. Wystarczy „narysować” kolejne i umieścić pod kodami odpowiednimi dla znaków z ogonkami i wszystko będzie ładnie działało. Także jeśli masz możliwość przekazania czcionki grafikowi, to zrób to śmiało. ;]
Dzięki za artykuł, pomógł mi bardzo :)
Ja przy generowaniu pliku z czcionką by mieć polskie znaki musiałam je dopisać w wyznaczonym do tego miejscu, co nie zmienia faktu, że w końcu mi się udało :)
Na necie jest dużo wpisów na ten temat, lecz albo nie można uzyskać odpowiedzi, albo nie są tak rzeczowe.
Twój blog ląduje w moich ulubionych :)
Pozdrawiam
Kasia
P.S. Zwiększ troszkę światło między wierszami, tekst będzie bardziej czytelny :)
Cieszę się i zapraszam do śledzenia nowych wpisów – polecam kanał RSS blogu. ;] Jeśli masz jeszcze jakieś pytania, chętnie na nie odpowiem.
Co do interlinii, pomyślę nad tym, po prostu tak zaplanował to autor szablonu i jakoś niespecjalnie się nad tym zastanawiałem.
Linkdump 30- AJAX-2
Właśnie dostałem powiadomienie na maila o pogaduszkach, widzę że wciąż trwają
ja dodam od siebie iż w moim przypadku z czcionkami nic nie poszło do przodu. Przesłałem ofertę dwu grafikom, żaden się nie podjął
No nie wiem, generalnie graficy też mają swoje „widzimisię”, także ja Ci nic na to nie poradzę. Gdybym był bardziej „artystyczny”, to sam bym Ci pomógł, niestety tutaj wykracza to poza moje kompetencje. Chyba, że naprawdę byłbym zmuszony, to w końcu bym jakoś dał radę. ;]
Cały czas ktoś ma kilka słów do dodania na temat Cufona, więc trwają. Może powinienem stworzyć jakiś nowy wpis z innym problemem z tą biblioteką, wtedy można by trochę odciążyć tą listę komentarzy, którą się trochę ciężko czytać.
PHP- Funkcja sprintf przyjmująca zmienną liczbę argumentów
Na moim blogu plik w header.php wyglądał nieco inaczej:
<script src="/js/cufon-yui.js” type=”text/javascript”>
<script src="/fonts/Fertigo_Pro_400.font.js” type=”text/javascript”>
Cufon.replace(‘h1, h2, h3, h4, h5, h6, blockquote, #commentform #submit, .feederss-label, .feedemail-label, .dropcap, #contentbox form .pushbutton-wide’, { hover: true }, { fontFamily: ‘Fertigo Pro’ });
.feederss-label, .feedemail-label {margin:-2px 0 0 0;}
h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .feederss-label {text-decoration:none;}
Plik trochę bardziej złożony pewnie dlatego, że zmianę cufóna mogę dokonywać w themie WordPressa z pozycji wygodnego panelu.
Podobno wielką zaletą cufona jest uroda – co zobaczyłem to średnio jestem zachwycony. W rezultacie myślę nad zmianą koloru czcionki, a jeszcze lepiej by była w dwóch kolorach z wykorzystaniem gradientu. Na przykład takie coś:
Cufon.replace(‘h1′, {
color: ‘-linear-gradient(white, black)’
});
Niestety font w cufonie nie chce się ładniej wyświetlać, a w zależności gdzie wpiszę powyższy kod nieraz całego cufona wywala wyświetlając raptem zwykłego fonta. Nie poddałem się, próbowałem też z zapisami w innym formacie:
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.3, rgb(237,178,82)),
color-stop(0.65, rgb(255,214,115)),
color-stop(0.83, rgb(255,255,150))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(237,178,82) 30%,
rgb(255,214,115) 65%,
rgb(255,255,150) 83%
);
albo
textShadow: ’1px 1px 1px #0f0f0f’, color: ‘-linear-gradient(#f5f5f8, 0.56=#e0e0e0, 0.56=#cccccc, #ffffff)’ } );
Jakbym nie próbował, żadnego gradientu uzyskać nie mogę i zastanawia mnie czy wspomniany panel tu nie wadzi. Dużo czytałem, wile razy próbowałem na wiele sposobów Cufon wyświtla się tylko tak jak w panelu, rzecz w tym iż obsługuje jedynie zmianę koloru bez uzyskania gradientu. Wiesz może jak to ugryźć?
Moim zdaniem próbujesz chyba zbyt dużo wyciągnąć z tej relatywnie prostej biblioteki. Sam autor pisał gdzieś, że pracuje nad bardziej zaawansowanymi właściwościami tekstu, ale jakoś na razie efektu nie widać.
Potencjalnym rozwiązaniem wydaje mi się jedynie prześledzenie, jak wygląda przepływ danych dotyczących parametrów CSS przesyłanych do poszczególnych elementów i usunięcie / zmodyfikowanie fragmentów, które psują to, co opisałeś.
WAMP- Usuwanie komunikatów o błędach XDebug
witam , jest to kolejna strona która poleca rozwiązanie cufon, a mi mimo zastosowania wszystkich kroków nie chce działać to rozwiązanie,
mój kod jest exrtemalnie prosty
Cufon.replace('h1'); Web elegance fonts special font Special Elite!będę wdzięczny za wskazówki
@pikolo – naprawdę chciałbym Ci pomóc, ale zupełnie nie rozumiem, w czym problem. Dałeś linijkę wykonania Cufona i kawałek tekstu, a nie powiedziałeś ani gdzie to się znajduje, ani w jaki sposób wygląda kod strony i sposób włączenia kodu biblioteki. Możesz poczytać sobie np. kod niniejszego blogu, żeby zobaczyć, gdzie znajdują się wszystkie elementy i w jaki sposób są uszeregowane – gwarantuję, że zadziała. ;]
PHP: Dzielenie stringa według separatora z wyłączeniem znaku ucieczki.
czy mogę za[ytać co to znaczy- „Następnie dane są konwertowane do postaci ścieżek VML”
jak to można zrobic?
@bart: Cały akapit zawierający tą informację opisuje to, co robi konwerter – Ty tylko siedzisz i czekasz na gotowe. Ścieżki VML to zdecydowanie nie jest coś, co mógłbyś wklepać „z palca” do pliku tekstowego, więc spokojnie, ciesz się, że coś jest w stanie zrobić to za Ciebie. ;]
Linkdump #61: PHP.
no właśnie tak podejrzewałem…znalazłem tylko vector converter – wymagane ma php i apache, czy można to czymś innym przerobić?
Nie znam innych narzędzi, które mogłyby Ci pomóc w tej sprawie – ja tutaj opisałem gotowy konwerter, więc nie wiem nawet, po co Ci takie narzędzie. ;] Zresztą – ścieżki VML znajdziesz właśnie w wygenerowanym pliku – jedyna zmiana to to, że są one w strukturach JSON, ale je możesz łatwo odczytać zarówno w PHP, jak i JS.
Linkdump #61: PHP.
nie rozumiem tego dokładnie chyba.. robię tak: ściągam czcionkę (.TTF), konwertuje na SVG przy pomocy fontforge, następnie wrzucam do http://cufon.shoqolate.com/generate/ i w wyniku mam plik js.
Gdy podłączam to na stronę to nie działa w IE.
coś pominąłem?
A po co przerabiasz to w FontForge? Wrzuć po prostu całego TTFa do generatora Cufona i gotowe. Nie wiem, dlaczego miałoby to nie działać pod IE. Jeśli możesz, to podeślij link, zobaczę co tam się dzieje.
Linkdump #61: PHP.
Mam IE9 , włączyłem tam twojego bloga i nie wyświetla się Twoje imię i nazwisko u samej góry, ani tytuł artykułu – tzn pojawiają się na sekundę i jakby po wczytaniu skryptu znikają ( cały czas czytałem to w firefox’ie ).
Trzeba podpiąć nowego cufona i działa w IE9. pozdrawiam
@bart: Sprawdziłem wszystkie wersje IE na IETesterze i śmigało. Skoro jednak mówisz, że jest problem, to może przyśpieszę moje poszukiwania nowego szablonu. ;] W każdym razie fajnie, że udało Ci się w końcu wszystko ogarnąć.
Linkdump #61: PHP.
Bardzo pomocny artykuł rozwiązał wszystkie moje problemy. Takie to proste.
Masakra. nic mi nie wychodzi. mógłby mi ktoś pomóc z zainstalowaniem polskich znaków na mojej stronie WordPress. Mam tam zainstalowaną czcionkę Rockwell Std.
W folderze js mam jeszcze cufon.js oraz Rockwell_Std_400.font.js
Tutaj link do aktualnego header.php.
Pierwsze standardowe pytanie – pewien jesteś, że ten font posiada polskie znaki? Testowałeś gdzieś wersję TTF / OTF w jakimś edytorze tekstu? Drugie standardowe pytanie – na pewno wyeksportowałeś czcionkę z pełnym zestawem znaków? Jak to sprawdzisz, dodaj komentarz i dalej coś poradzimy.
BTW Twój komentarz nie zawiera żadnych linków, jeśli możesz, to wstaw je jeszcze raz w treści komentarza.