publikacja: 25 sierpnia 2008, autor: , komentarze 23 https://wpninja.pl/artykuly/flir-czyli-sposob-na-dowolny-kroj-pisma/

FLIR czyli sposób na dowolny krój pisma

FLIR czyli sposób na dowolny krój pisma

Projektując szatę graficzną powinniśmy korzystać jedynie z garstki podstawowych fontów. Dzięki czemu zapewniamy w miarę jednolity wygląd tekstów na różnych systemach operacyjnych.

Czy istnieje sposób na uzyskanie dowolnego kroju pisma, który byłby widoczny bez względu na OS z jakiego korzystamy? Istnieje, nazywa się FLIR i mimo, że dopiero zaczął raczkować to już teraz ostro kopie tyłki!

Facelift Image Replacement

FLIR to skrypt, który potrafi dynamicznie zamieniać tekst w grafikę używając do tego dowolnego fonta. Dzięki temu właśnie możliwe jest uzyskanie każdego, nawet tego najbardziej fikuśnego, kroju na naszej stronie internetowej.

Podobnych rozwiązań było w przeszłości kilka (m.in sIFR czy text2png) ale FLIR nokautuje wszystkie pozostałe jednym ciosem. Jego najważniejsze cechy:

  • niewiarygodnie szybki
  • łatwy do zintegrowania ze stroną
  • działający na wszystkich nowoczesnych przeglądarkach internetowych (Firefox, Opera, Safari a nawet na znienawidzony Internet Explorer 5.5 i nowsze)
  • przystosowany do działania z najpopularniejszymi bibliotekami JS (jQuery, prototype, scriptaculous, mootols)
  • umożliwiający łatwe tworzenie własnych wtyczek rozszerzających funkcjonalność (np. FancyFont czy QuickEffects)
  • poprawnie interpretujący „polskie ogonki”
  • posiadający już wsparcie dla WordPressa oraz Drupala
  • oparty na licencji GPL czyli w pełni darmowy

FLIR w akcji czyli kilka przykładów

FLIR i WordPress

FLIR - wtyczka do WordPressa

FLIR - wtyczka do WordPressa

Facelift Image Replacment (FLIR) to specjalna wtyczka do WordPressa dzięki, której instalacja FLIRa staje się dziecinnie prosta:

  1. Ściągnąć, rozpakować i przekopiować folder facelift-image-replacement na serwer do katalogu z innymi wtyczkami (wp-content/plugins/).
  2. Ustawić chmod 666 dla plików /facelift-image-replacement/facelift/config-flir.php.
  3. Ustawić chmod 777 dla katalogu /facelift-image-replacement/facelift/cache.
  4. Aktywować wtyczkę z poziomu panelu administracyjnego (zakładka wtyczkiwłącz wtyczkę).
  5. Ustawić odpowiednie opcje (zakładka wyglądFLIR).

Nowego fonta dodaje się poprzez wgranie pliku .ttf do katalogu /facelift-image-replacement/facelift/fonts i wybraniu go następnie w opcjach wtyczki.

tagi:

Komentarze

  1. Kamil 9 lat temu:

    Ok a jak to się ma do indeksowania przez Google?

    odpowiedz
  2. Szymon Skulimowski 9 lat temu:

    Tekst podmieniany jest na grafikę na poziomie JavaScriptu czyli dopiero na komputerze odbiorcy. Powstaje więc pytanie – czy Googlebot wykonuje u siebie skrypty JS?

    Można także skorzystać z tzw. metody text-indent:-9999px a obrazki wsadzić jako background (trzeba wtedy ustawić FLIR-owi dodatkową opcję: FLIRStyle.useBackgroundMethod = true).

    odpowiedz
  3. Bryson 9 lat temu:

    Don’t know if english will show up very well here for you guys, but spiders do see the text of the image 100%. It is an SEO friendly plugin. There is no need to use any additional settings to make sure that bots from google or yahoo can see the text of an image generated by FLIR, if you’re not so sure, just check the source code of a page that you have used FLIR on, the text is still there, right?

    odpowiedz
  4. Bryson 9 lat temu:

    Don’t poznają jeżeli język angielski będzie demaskować bardzo dobrze tutaj dla was chłopcy, ale spiders robi widzą tekst obrazu 100%. To jest SEO przyjacielski wtyczkowy. nie ma żadnego zapotrzebowania używają wszelkie dodatkowe parametry instalacyjne upewniać się co (żeby; który) bots od google albo yahoo może widzieć tekst obrazu wyprodukowanego przez FLIR, jeżeli wy ’re nie tak (więc) pewnien, po prostu (dopiero co) sprawdzają źródło (początkowy) szyfr strony co (żeby; który) wy ma używany FLIR na, tekst jest wciąż tam, prawo (prawy; naprawo od)?

    odpowiedz
  5. kamil 9 lat temu:

    Bryson thnx we know that now. Greetings for you.

    odpowiedz
  6. Szymon Skulimowski 9 lat temu:

    Yeap, thanks Bryson for visiting and answering. And yes, your’s online translator (english to polish) sucks ;)

    odpowiedz
  7. aniec2 9 lat temu:

    Nareszcie coś dla mnie! Czy naprawde w IE nie powoduje to np. rozjazdu strony?

    odpowiedz
  8. Szymon Skulimowski 9 lat temu:

    @aniec2,
    Sprawdzałem na Internet Explorerze 7.0 i działa znakomicie. Według zapewnień autora FLIR powinien dać radę nawet na wersji 5.5.

    Jeśli zdecydujesz się na implementację FLIR-a u siebie to nie omieszkaj się nam o tym pochwalić! :-)

    odpowiedz
  9. aniec2 9 lat temu:

    a oczywiście, oczywiście:) Jak tylko zamkne mgr zabieram sie do działania.

    Trochę lizdupstwa ale bardzo podoba mi sie idea tego bloga. Śmietnika nie ma, jasno i przejrzyście. Tysiąc razy bardziej polecam wszystkim zaglądanie tutaj niz np. na wordpress.org. pl ;/.

    Autorowi piwo!:)

    odpowiedz
  10. Szymon Skulimowski 9 lat temu:

    Dzięki serdecznie :)

    PS. Sprawdzałem na Google Chrome i też FLIR działa.

    odpowiedz
  11. kamil 9 lat temu:

    Mi nie działa tzn. u mnie na blogu zapewne za stara wersja php jeżeli chodzi o hosting. Nie ma chyba tej funkcji BG tak ona się nazywa?

    odpowiedz
  12. Szymon Skulimowski 9 lat temu:

    Chodzi o bibliotekę GD. I faktycznie do FLIR-a zalecany jest PHP5.

    odpowiedz
  13. Krzysztof 9 lat temu:

    hej, u mnie też nie działa, myślę, że wszystko zrobiłem tak jak opisałeś i nic… jak sprawdzić czy biblioteka GD jest załadowana i gdzie to sprawdzić na razie używam darmowego serwera 000webhost który korzysta z PHP5.2.
    czy może to być wina skórki? ewentualnie ja coś robię źle:/
    nie mam pojęcia o ćo chodzi jakby, ale wtyczka zapowiada się bardzo obiecująco:)

    odpowiedz
  14. Krzysztof 9 lat temu:

    oki działa, musiałem uaktualnić wordpress’a:) pzdr

    odpowiedz
  15. Krzysztof 9 lat temu:

    to znów ja, nie wiem dlaczego, ale może ktoś mi napisze czemu wtyczka widzi polskie fonty tylko w rozszerzeniu TTF, a te w OTF wyświetla niepoprawnie tzn. bez ćźńśąę…???

    odpowiedz
    1. Szymon Skulimowski 9 lat temu:

      Autor wtyczki do WordPressa podejrzewa, że to wina biblioteki GD lub starej wersji PHP. Może uda Ci się znaleźć odpowiedź na jego forum. Daj znać jeśli uda Ci się rozwiązać problem.

      odpowiedz
  16. kamil 9 lat temu:

    Witam. Czy moglibyście polecić jakąś stronę z fontami, które poprawnie wyświetlają się jeżeli wykorzystujemy je przy użyciu FLIR. Znalazłem nieco czcionek niby z polskimi ogonkami, a tylko jedna działa poprawnie – inne w miejscu polskich znaków pozostają „puste”.

    odpowiedz
  17. Szymon Skulimowski 9 lat temu:

    Daj znać jeśli uda Ci się rozwiązać problem.

    OTF-y już tak będą mieć. Żeby polskie fonty w nich działały trzeba je przekonwertować (np. FontForgem) do TTF-ów.

    odpowiedz
  18. Artur 8 lat temu:

    A ja właśnie próbuję zainstalować FLIRa na swojej stronce i mam jeden problem. Wybieram sobie czcionkę i wszystko wydaje się działać. Ale tworzone obrazki są bardzo małe, tzn. wybrałem sobie taką czcionkę. Nie chcę zmieniać wielkości czcionki w css. Wiem, że da się coś pokombinować z atrybutem cSize i mnożeniem czcionki z css’a ale nie wiem jak. Czy możecie pomóc?

    odpowiedz
  19. Marek 6 lat temu:

    Odgrzewam temat ;)

    Jak FLIR ma się do Cufona, lub innych tego typu rozwiązań, bo szukam właśnie czegoś takiego i zastanawiam się, czy nie jest on już „za stary”, skoro artykuł jest z 2008 ;)

    Swoją drogą, to nie znalazłem nic o Cufon’ie na Twoim blogu ;)

    odpowiedz
  20. Szymon Skulimowski 6 lat temu:

    FLIR nie jest już rozwijany więc jedynym wyjściem jest Cufon.

    odpowiedz
  21. Colin 6 lat temu:

    A czy jest jakaś wtyczka z tym Cufonem dla WordPressa? Mogłoby mi się przydać ;)

    No i mam pytanie – czym to się różni od tradycyjnego dodawania czcionek, np. takiego http://forum.dobreprogramy.pl/wlasna-czcionka-t305184.html

    odpowiedz

Dodaj własny komentarz

Odnośniki z innych stron

Lista innych stron, które w jakiś sposób odnoszą się do opublikowanej tutaj treści:

  1. Instalacja FLIR-a krok po kroku

    […] FLIR-a – JS-ową mieszankę dzięki, której uzyskanie dowolnego kroju pisma jest bajecznie […]