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

FLIR czyli sposób na dowolny krój pisma

Warning: Trying to access array offset on false in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/functions.php on line 159

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

FotoFestiwal 2009

FLIR i WordPress

FLIR - wtyczka do WordPressa

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

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

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

tagi: typografia

Komentarze

Kamil 16 lat temu:
Ok a jak to się ma do indeksowania przez Google?
odpowiedz
Szymon Skulimowski 16 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
Bryson 16 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
Bryson 16 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
kamil 16 lat temu:
Bryson thnx we know that now. Greetings for you.
odpowiedz
Szymon Skulimowski 16 lat temu:
Yeap, thanks Bryson for visiting and answering. And yes, your’s online translator (english to polish) sucks ;)
odpowiedz
aniec2 16 lat temu:
Nareszcie coś dla mnie! Czy naprawde w IE nie powoduje to np. rozjazdu strony?
odpowiedz
Szymon Skulimowski 16 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
aniec2 16 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
Szymon Skulimowski 16 lat temu:
Dzięki serdecznie :)
PS. Sprawdzałem na Google Chrome i też FLIR działa.
odpowiedz
kamil 16 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
Szymon Skulimowski 16 lat temu:
Chodzi o bibliotekę GD. I faktycznie do FLIR-a zalecany jest PHP5.
odpowiedz
Krzysztof 16 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
Krzysztof 16 lat temu:
oki działa, musiałem uaktualnić wordpress’a:) pzdr
odpowiedz
Krzysztof 16 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 16 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
kamil 16 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
Szymon Skulimowski 16 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
Artur 16 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
Instalacja FLIR-a krok po kroku 15 lat temu:
[…] FLIR-a – JS-ową mieszankę dzięki, której uzyskanie dowolnego kroju pisma jest bajecznie […]
odpowiedz
Marek 13 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
Szymon Skulimowski 13 lat temu:
FLIR nie jest już rozwijany więc jedynym wyjściem jest Cufon.
odpowiedz
Colin 13 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