Skocz do zawartości




Zdjęcie

[Cufon] Niestandardowa czcionka w każdej przeglądarce


  • Zaloguj się, aby dodać odpowiedź
Brak odpowiedzi do tego tematu

#1 Vojteek

Vojteek

    Dc. WEBMASTER

  • Members
  • PipPipPip
  • 2803 postów
  • LocationRybna

Napisano 11 grudzień 2010 - 11:51

Poszukując rozwiązania problemu kaprysu klienta na niestandardową czcionkę na stronie internetowej, często spotykamy rozwiązania oparte o flash (np. sIFR). Nie są one dobre, bo po pierwsze – nie można tekstu kopiować a po drugie, trzeba mieć wtyczkę flash w przeglądarce. Znakomitą alternatywą jest plugin dla JavaScript, potrafiący czynić cuda w tej dziedzinie.

Mowa tu o Cufon - http://cufon.shoqolate.com/generate/
Skrypt potrafi wstawić na stronę internetową każdą czcionkę, jaką sobie zażyczycie. Pierwszą rzeczą, którą należy zrobić, jest wygenerowanie pliku czcionki. Jeśli posiadamy czcionkę w formacie TrueType (*.ttf) - używamy jej w formularzu na stronie podanej wyżej. Jeśli chodzi o załączane znaki (sekcja Include the following glyphs) - nigdy nie zaznaczajmy wszystkiego, gdyż plik wynikowy będzie zbyt duży (powinien ważyć mniej niż 100kB). Załączamy więc - w zależności od potrzeb - Basic Latin (duże i małe litery + cyfry + część interpunkcji). Dla nas ważne są często polskie znaki diakrytyzowane – ą,ę,ź,ć itd. Aby wyciągnąć je z załączonej czcionki, zaznaczamy fajkę przy Latin Extended-A, gdyż zawiera znaki od 0x0100 do 0x017F. W tym przedziale znajdują się polskie litery (źródło: http://adsorption.or...fo/pl-codes.htm ). Reszta opcji - w zależności od potrzeb.

Po przesłaniu formularza, strona zwróci nam plik o nazwie nazwa_czcionki.font.js. Nazwę tą można zmienić przed wstawieniem na stronę, jeśli jest to niezbędne. Jeśli chodzi o używanie pluginu na swojej stronie, musimy go najpierw pobrać - http://cufon.shoqola...js/cufon-yui.js i użyć poniższego kodu:
[CODE]








Nagłówek niestandardowy


Inny element pisany Twoją czcionką.





[/CODE]
Ważne miejsca w kodzie:
1. UTF-8 jest póki co jedynym kodowaniem w 100% poprawnie obsługiwanym przez Cufon. Aby uniknąć problemów, najlepiej jest użyć na swojej stronie właśnie UTF-8.
2. Załączamy plugin oraz naszą wygenerowaną czcionkę.
3. Zamieniamy wszystkie elementy h1 na pisane niestandardową czcionką.
4. Zamieniamy tekst w elemencie o id="moj_h2" na pisany niestandardową czcionką. Ta składnia (#id) wymaga jednak załączenia jakiegoś modułu selektorów dla JavaScriptu, np. jQuery, prototype, MooTools etc. Cufon wspiera selektory z większości istniejących frameworków.
5. Styl jest wymagany, ponieważ jeśli coś nie zadziała (np. wyłączony JavaScript w przeglądarce) - domyślna czcionka powinna być zdefiniowana.
6. Inicjalizujemy zmianę czcionek (bez tego fragmentu kodu, występują opóźnienia w IE).

Iii.. to wszystko Możemy teraz zgarnąć kasę za zastosowanie dokładnie takiej czcionki na stronie, jaką sobie zażyczono
Więcej wskazówek oraz bardziej skomplikowanych przykładów znajdziemy w dokumentacji - https://github.com/sorccu/cufon/wiki/ .

UWAGA: Jeśli chcesz użyć czcionki pobranej z innej strony w przekodowanej formie (z rozszerzeniem .js) i nie działa ona na Twojej stronie – prawdopodobnie jest zabezpieczona i może być użyta tylko na stronie, z której została pobrana. Aby użyć jej na swojej stronie, musisz zdobyć (często - wykupić) czcionkę w pliku TTF i wygenerować ją sam, używając formularza Cufon.

Zmieniony przez - Vojteek w dniu 2010-12-11 12:08:04




Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych


Pozycjonowanie strony: Virtual Development