Wysłany: 22.01.2010 19:18 [CSS] Niestandardowe fonty na stronie
Jestem w pełni świadomy tego, że jest po części o tym w kursie
Jednak mam zamiar w tym tekście pokazać 2 główne rzeczy:
jak zrobić to uniwersalnie
jak zrobić to lepiej (związane z: patrz wyżej)
Uniwersalne czcionki dla sieci ograniczają i utrudniają życie
zarówno webdesignerom - jeżeli są świadomi tego, że są zmuszeni do korzystania z nich
jak i webmasterom - jeżeli jakiś webdesigner wymyślił sobie nietypową czcionkę (i co teraz zrobić?)
Dotychczasowe rozwiązania były jednak średnie - image-replacement jest mimo wszystko niewygodny (trzeba wcześniej przygotować pliki z obrazkami - o ile w przypadku stałych elementów jak menu nie stanowi to problemu, to ze zmiennym tekstem, jak np. nagłówki, tak różowo już nie jest), a inne metody wymagały JS lub Flasha (bądź obu jednocześnie)
Na szczęście świat idzie do przodu (chociaż ten akurat feature IE zaproponował dosyć wcześnie, chociaż z nim jest inny problem - o tym potem) i możliwości przeglądarek się rozwijają, trwają prace nad CSS3, te sprawy.
a potem w kodzie wystarczy użyć czcionki o nazwie jaką zdefiniowaliśmy w font-family
A jak to zrobić lepiej? Nie zakładać, że użytkownik tej czcionki nie posiada i nie zmuszać go do jej ściągania. Czyli najpierw sprawdzić, czy nie ma tej czcionki:
Dobra trójka się rozwija, więc w Firefoksie (od wersji bodajże 3.1), Operze (od 10) czy Safari (od 3?) normalnie radzą sobie z fontami w ttf (raczej najpopularniejszy format). Chrome bazuje na silniku Safari więc też to potrafi.
Tylko wszyscy wiemy, że nie do końca warto coś stosować, jeżeli Internet Explorer tego nie wspiera. A IE fontów ttf odczytywać nie potrafi. Wymaga formatu, który MS sam wymyślił czyli Embedded OpenType (eot).
Jeżeli mamy nasz font w .eot to nie ma problemu - dodajemy jedną linijkę i wszystko działa. Nawet w IE6!
Jeżeli nie - to mamy pewien problem. Problem, który na szczęście da się w prosty sposób rozwiązać. Jakaś dobra dusza napisała program, który potrafi przekonwertować font z .ttf na .eot http://code.google.com/p/ttf2eot/
Windowsowcy mają tam nawet gotową binarkę, reszta świata (Linux, Unix) potrafi raczej korzystać z make więc problemów być nie powinno.
Instrukcja użytkowania w README oczywiście.
Jak to wygląda w praktyce? Bardzo dobrze: http://roberto.ovh.org/html-css/fonty.html
Działa w Fx, Operze, Safari, Chrome i IE.
edit: nie działa pod Chrome na Windowsie (a na Linuksie? ktoś sprawdzi?)
Osobiście nie widzę zbytnio powodów, żeby z tego nie korzystać.
Oczywiście nie należy z tym też przesadzać.
I też bardzo ważna rzecz: nie można sobie użyć jakiegokolwiek fontu - one są udostępniane na konkretnych licencjach, więc trzeba sprawdzić, czy możemy je wykorzystać na stronie, zarówno prywatnej jak i komercyjnej.
Na deser - strona ze zbiorem darmowych (nawet do komercyjnego użycia) fontów: http://www.fontsquirrel.com/
Wisienką na torcie jest fakt, że są tam gotowe pakiety czcionek z przeznaczeniem na strony internetowe, które mają w sobie gotowy kod CSS i font także w formacie .eot dla IE
Ostatnio zmieniony przez Roberto dnia 24.01.2010 22:17, w całości zmieniany 1 raz Użytkownik otrzymał punkt pomocy za ten post od: cis-moll, Igor, kropek4767, kurshtml, Luke, Puma, Siwy, T4KEDA
otf to nie jest truetype tylko opentype - to raz
dwa - na localu szukasz po nazwie fonta, nie pliku
trzy - @font-face to osobny selektor importujący dany font - zapis, który przedstawiłeś jest bez sensu, w stylu:
Już to rozgryzłem i usunąłem posta, więc sorka, że w zasadzie na marne pisałeś Jednak proponuje to potraktować jako uzupełnienie poprzedniego posta, w którym nie wszystko zamieściłeś. Daję Ci punkt pomocy.
A tak na marginesie jak się zaznacza coś w kodzie?
teoretycznie też mógłbym dać do podglądu ale:
musiałbym i tak gdzieś wrzucić te czcionki, także w formacie .eot (o ile jeszcze w internecie jakiegoś .otf czy .ttf znajdę niespakowanego) czyli najpewniej... do siebie i efekt byłby praktycznie ten sam
Wrzuć jakąś naprawdę niezwykłą czcionkę (jak chcesz mogę ci jakąś podesłać), aby można było na pierwszy rzut oka stwierdzić, że jest niestandardowa. Co do tej równe dobrze mogę pomyśleć, że jest to Times New Roman
Hmmmmm ciekawe rozwiązanie; mam pytanie czy spowalnia to pracę serwera? czas wczytywania strony, bo na smashingmagazine czytałem kiedyś, że niestandardowe czcionki przez css są nie użytecznie. Dokładnie nie pamiętam wszystkich argumentów ale było, że użycie tego spowalnia znacznie stronę. Pisali, że o wiele lepiej użyć obrazków, bo one zawsze działają, szybciej się one załadują, nie sprawiają problemów albo najlepiej flasha. W sumie to się zgadza bo jeszcze nigdy nie widziałem rozwiązania tego z css na konkretnej stronie, portofolio, blogu. Znaczy się to widziałęm raz, dawno temu ale długo się ładowało, tylko nie wiem czy dlatego, że strona była oblegana (link na głownej w SM) czy przez te fonty.
pracę serwera? nie
czas wczytania strony - tam samo jak obrazek zwiększa ten czas tak samo czcionka zwiększy. nie ma różnicy, czy ściągane dane to obrazek, css, skrypt js, html, font czy jeszcze coś innego
czy spowalnia znacznie stronę? hm, zanim się czcionka nie ściągnie to jest zamiast niej chyba standardowa (nie wiem, nie zauważam - za szybko), a jak się ściągnie - to działa niczym lokalna, ale bez instalowania
obrazki będą ściągane z taką samą prędkością jak inne pliki, więc nie rozumiem za bardzo tego argumentu. ale Mozilla wprowadza kolejny format czcionek (...), który jest właśnie nastawiony na optymalizację ich wagi
w tym rozwiązaniu piękne jest to, ze nie sprawia problemów w bardzo prosty sposób można kontrolować 'co jeśli nie zadziała' tak jak normalnie przy ustawianiu czcionek - dając ich listę.
flash? z armatą na muchę i jest wkurzający, jest blokowany, obciąża przeglądarkę
trudno było szukać takich rozwiązań, skoro od kiedy IE zaczął wspierać .eot sporo czasu minęło, .eot nie zdobył popularności, a CSS3 dopiero wchodzi i całkiem niedawno przeglądarki zaczęły importowanie czcionek wspierać (a niektóre jak Chrome nadal nie), a do tworzenia .eot'ów nie było sensownego softu
to fakt; o wiele wygodniej by było dla wszystkich gdyby to rozwiązanie działało dla wszystkich przeglądarek, nie trzeba by było kroić tekstu w .gify, .pngi Najlepszym rozwiązaniem było by chyba coś w stylu "biblioteki czcionek" tak jak w przypadku bibliotek php. No jest coś w tym rodzaju ale trzeba js wtedy... Hmmm rozwiązanie z css to ma jeszcze 1 wielki rozwój mobilny, itp Masa osób teraz z iphonów, telefonów z dot. wyświetlaczem no i zwykłych korzysta z sieci wchodząc w pierwsza lepsza darmowa sieć miejska. Jeśli czcionka w rozmiarze np. 20px trochę różniła od Ariala (który by za nią wszedł, gdyby ta się nie wyświetliła) to wszystko by padło. Chyba, że mnie coś ominęło i telefon poradził by sobie z czcionka niestandardowa?
Czy czcionki który zostaną włączone Twoją metodą idą do folderu czcionek systemowych??
nie za bardzo rozumiem to o bibliotekach czcionek i potrzebnego do tego JS
nie wiem czemu wszystko by miało 'paść' jakby się zmieniła czcionka?
i fakt, że w urządzeniu z małym wyświetlaczem będzie jakaś inna (jednak czytelna) czcionka jakoś by mnie niespecjalnie martwił - teraz korzysta się tylko z czcionek standardowych jak się chce wpisać tekst. Tak zyskuje ktoś (mając przeglądarkę, która to wspiera), a ktoś inny nic nie traci.
nie za bardzo rozumiem to o bibliotekach czcionek i potrzebnego do tego JS
Chodziło mi o tą metodą na niestandardowe czcionki przez JS a na myśli miałem, że dobre by było coś co działało by wszędzie nie sprawiając problemów (czym na pewno jest element tak ważny jak typografia zależny od JS)
Cytat:
nie wiem czemu wszystko by miało 'paść' jakby się zmieniła czcionka?
no, że się rozjedzie, divy, coś zacznie wykraczać szczególnie, że jeśli ktoś już się decyduje na niestandardowa czcionkę to raczej nie będzie miał zwykłego jednolitego tła, tylko raczej coś bardziej skomplikowane. Gdy czcionka się zmieni tekst i będzie np. o kilka linijek dłuższy/krótszy to nici z tła obrazkowego bo tekst za nie wyjedzie, jeszcze pewnie obniży inne divy.
strony robione co do pixela dla danej czcionki i danego rozmiaru to kiepski pomysł
przede wszystkim - użytkownik taki rozmiar może zmienić - jeżeli wtedy rozpadnie mu się strona, to znaczy że coś jest nie tak z tą stroną i autor tego nie przemyślał
a urządzenia mobilne często blokują pewien minimalny rozmiar czcionki (z racji małego ekranu)
no i w różnych systemach operacyjnych różne czcionki inaczej się zachowują, wygładzanie jest inaczej robione - więc tutaj też nie ma co liczyć pixeli
Linuksowy Chrome sobie całkiem dobrze radzi (nie widzę problemów) Man1ek, jak masz takie wątpliwości to poczytaj sobie jakie są różnice nawet w standardowej czcionce: http://www.forumweb.pl/viewtopic.php?t=51087
i już będziesz wiedział dlaczego układ strony nie powinien zależeć od rozmiaru czcionki ...
Nie wiem dlaczego piszesz że na chrome pod windows to nie działa, mam chrome 4x i działa dobrze. Ta wersja jest chyba beta a oficjalna 3x ale polecam wersje 4x z uwagi na możliwość instalacji wtyczek.
Zobacz następny temat Zobacz poprzedni temat Nie możesz pisać nowych tematów Możesz odpowiadać w tematach Nie możesz zmieniać swoich postów Nie możesz usuwać swoich postów Nie możesz głosować w ankietach
Jednak proponuje to potraktować jako uzupełnienie poprzedniego posta, w którym nie wszystko zamieściłeś. Daję Ci punkt pomocy. 
i efekt byłby praktycznie ten sam
Hmmm rozwiązanie z css to ma jeszcze 1 wielki 
rozwój mobilny, itp Masa osób teraz z iphonów, telefonów z dot. wyświetlaczem no i zwykłych korzysta z sieci wchodząc w pierwsza lepsza darmowa sieć miejska. Jeśli czcionka w rozmiarze np. 20px trochę różniła od Ariala (który by za nią wszedł, gdyby ta się nie wyświetliła) to wszystko by padło. Chyba, że mnie coś ominęło i telefon poradził by sobie z czcionka niestandardowa?
