Wpisy oznaczone tagiem "fonty" (19)  

saito
 
Fajny sposób przeglądania płatnych fontów:
next.fontshop.com/fontlists
font_list_display2_0.png
Pokaż wszystkie (2) ›
 

csslab
 
Technika osadzania własnych fontów na stronie internetowej sprowadza się do napisania w języku CSS specjalnych reguł '@font-face', które zawierają nazwy fontów, opisują ich styl i wagę oraz określają, gdzie znajdują się pliki tych fontów. Serwisy zajmujące się udostępnianiem krojów pisma na strony takie jak 'Google Web Fonts' wyręczają nas od tego i wymagają jedynie, aby na witrynie umieścić przeważnie krótki kod HTML lub kod CSS upraszczający cały proces. Kody te zostaną wyświetlone w serwisie Google wtedy, kiedy stworzymy naszą kolekcję fontów i następnie klikniemy na przycisk 'Use' umiejscowiony w prawym dolnym rogu strony. Drugi sposób uzyskanie kodu to skorzystanie z przycisku 'Quick-use' znajdującego się pod każdym przykładowym tekstem prezentującym font. Strona, którą następnie ujrzymy, podzielona jest na pewne części zawierające kolejne czynności do wykonania, aby na naszej stronie zawitały czcionki Google. Kod do skopiowania i wklejenia znajduje się w części trzeciej strony w niebieskim bloku z zakładkami wraz z instrukcją: 'Add this code to your website'. W zasadzie do wyboru mamy trzy rodzaje kodów do skopiowania, ale dla nas najbardziej odpowiednim jest ten w pierwszej zakładce pod nazwą 'Standard'. Jest tak, ponieważ drugi kod (w języku CSS) zawiera dyrektywę '@import', której nie akceptuje mechanizm weryfikujący kody CSS użytkownika blogu, natomiast ostatni kod (Javascript) jest bardziej skomplikowany, poza tym kod języku Javascript nie zadziała, jeśli osoba odwiedzająca stronę ma wyłączoną obsługę tego języka w przeglądarce.

google_css_1.png


Kod do skopiowania zmienia się dynamicznie wraz ze zmianami dokonywanymi w kolekcji fontów oraz w momencie, gdy wykonujemy czynności zawarte w częściach pierwszej i drugiej znajdujących się na stronie nad blokiem z naszym kodem. Zanim więc skopiujemy nasz kod, musimy ostatecznie wybrać style fontów i zestawy znaków. Jeżeli krój znaków posiada style poza tym o nazwie 'Normal 400', a my ich nie zaznaczymy, to w razie potrzeby w trakcie wyświetlania tego kroju na naszej strony przeglądarka internetowa pochyli lub pogrubi znaki tego fontu automatycznie, lecz nie zawsze będą one wyglądać atrakcyjnie. Dodatkowe style z kolei niosą ze sobą potrzebę ściągnięcia większej ilości danych podczas ładowania naszej strony.
Nieco odmiennie wygląda sprawa z wybieraniem zestawu znaków w drugiej części strony serwisu, gdzie występuje polecenie: 'Choose the character sets you want' – tutaj nie wybieramy zestawu dla każdego fontu z osobna, lecz globalnie dla nich wszystkich. Jeśli np. posiadamy w kolekcji dwa fonty, które zawierają w sobie zestaw znaków rozszerzonej łaciny i zaznaczymy zestaw 'Latin Extended (latin-ext)', to zestaw rozszerzonej łaciny będzie zawarty w obu tych fontach ładowanych na naszej stronie.

google_css_2.png


Gdy wszystko mamy już ustawione, kod HTML jest gotowy do skopiowania. Niestety sprawa się komplikuje, kiedy przychodzi do ustalenia miejsca, gdzie ten kod wkleić. Nie ma problemu, jeśli mamy własną stronę internetową – wklejamy wtedy kod wewnątrz znacznika '<head>' w pliku HTML. Niestety nie mamy takiej możliwości w przypadku blogu na 'pinger.pl'. Teoretycznie możemy wkleić kod do pola tekstowego 'Zewnętrzne statystyki' w ustawieniach blogu, ale podejrzewam, że może nie być to działanie zaakceptowane przez moderatora serwisu. Aby rozwiązać ten problem, musimy zamiast kodu HTML uzyskać kod CSS, który bez problemu wstawimy w pole tekstowe 'CSS' w sekcji 'Własne style' w ustawieniach blogu.
Pierwszą metodą jest skorzystanie z narzędzia online istniejącego pod adresem: 'pingback.pl/2012/09/12/google-web-fonts/', gdzie wklejamy uzyskany w serwisie Google kod HTML.

google_css_3.png


Po kliknięciu 'Wprowadź' powinien wyświetlić się interesujący nas kod CSS, który następnie kopiujemy do ustawień blogu.

google_css_4.png


Potrzebny kod CSS możemy uzyskać jeszcze w inny sposób, ale jest to bardziej skomplikowane.
Aby to zrobić, dobrze jest na początku wiedzieć, co właściwie robi ten konkretny kod HTML udostępniany przez Google. Mianowicie tworzy on w dokumencie strony element 'link', który ma za zadanie załadowanie zewnętrznego arkusza stylów zawierającego kod CSS wraz ze wspomnianymi na początku regułami '@font-face'. Kluczowym składnikiem elementu 'link' jest atrybut 'href' określający adres powyższego arkusza.

google_css_5.png


Jest to standardowy adres internetowy, więc możemy go np. wprowadzić do pola adresu jakiejkolwiek przeglądarki internetowej. Uzyskany dokument, który następnie nam się wyświetli w oknie przeglądarki, to właśnie arkusz stylów z poszukiwanym przez nas kodem CSS.

google_css_6.png


Musimy jednak wiedzieć, że treść tego arkusza jest generowana dynamicznie. Czyli za każdym razem kiedy o niego poprosimy, treść w nim dostarczona może być nieco inna, a zależy to od przeglądarki pobierającej ten arkusz. Serwis Google wykrywa, jaka przeglądarka z nim się komunikuje i tworzy w regule '@face-font' adresy fontów obsługiwane konkretnie przez tą przeglądarkę.
Niestety kod CSS w formie jaką wysyła Google zostanie odrzucony w ustawieniach blogu. Przed wklejeniem należy go więc poddać edycji: usunąć wszelkie funkcje 'local' i 'format', do deskryptora 'src' dodać po przecinku kolejne funkcje 'url' z adresami fontów obsługiwanych w innych przeglądarkach oraz umieścić na końcu adresów plików fontów dla Internet Explorera specjalnych końcówek '?#' lub '?#iefix'. Ostatecznie kod powinien wyglądać tak jak ten, który generowany przez narzędzie online wymienione wcześniej.

Gdy mamy już kod CSS ze specjalnymi regułami '@font-face' opisującymi osadzane fonty, potrzebujemy jeszcze w nim zwykłych reguł CSS określających, które elementy będą wykorzystywać nasze fonty i jakie będą to fonty. Część potrzebnych informacji na ten temat umieszczonych jest na stornie 'Google Web Fonts' tuż pod kodem HTML w ostatniej, czwartej części z poleceniem 'Integrate the fonts into your CSS'.

google_css_7.png


Przedstawione są tam linijki kodu CSS z właściwością 'font-family' i nazwą kroju pisma, które należy zastosować wewnątrz takich zwykłych reguł CSS wymienionych wcześniej. Pozostaje jeszcze ustalić selektory tych reguł. Jeśli ktoś nie wie, to powiem, że selektor to początkowy fragment reguły, wskazujący elementy, na których ma działać dana reguła CSS. Selektory można łączyć przecinkiem, jeśli chcemy, aby reguła wskazywała więcej elementów. We wspomnianej wyżej czwartej części strony Google znajduje się przykład takiej reguły, gdzie selektor to ciąg znaków 'h1'. Ta przykładowa reguła CSS sprawia, że font 'Metrophobic' będzie wykorzystany przy wyświetlaniu tekstu w nagłówkach 'h1'.
Samodzielne ustalanie wartości selektorów może być trudne, jeśli nie posiada się wiedzy na temat języków CSS i HTML oraz nie zna się budowy strony blogu. Pomocne narzędzia w szukaniu selektorów oferują dzisiejsze przeglądarki internetowe. Wystarczy wskazać kursorem myszki interesujący nas element strony, kliknąć prawym klawiszem myszy i wybrać z menu kontekstowego pozycję 'Zbadaj element'. Wyświetlą nam się wtedy m.in. informację na temat reguł CSS wskazujących na ten element.

Przedstawię kilka przykładów wartości selektorów, które mogą się przydać:

'ul#navlist, ul#navlist li.logout button' – przyciski po prawej na górze strony,
'div.profil-info h2' – nick właściciela blogu,
'a.msg-title, span.msg-title' – tytuły wpisów,
'.message-wrap .news-tags' – tagi wpisów,
'.message-wrap div.message' – treść wpisów,
'.msg_foot, .msg_foot a.time, .like span, .comments-more' – stopka wpisu.

Dla przykładu, jeżeli mamy już specjalną regułę '@font-face' z fontem o nazwie 'Ranchers', to następna, zwykła reguła zmieniająca font tytułów wpisów na ten o nazwie 'Ranchers' może wyglądać tak:

a.msg-title, span.msg-title{
font-family: 'Ranchers', cursive;
}

Podsumowując, aby osadzić fonty z serwisu 'Google web Fonts' na stronie blogu, musimy:
- wybrać interesujące nas fonty w serwisie Google i następnie skopiować wygenerowany kod HTML,
- wykorzystać dany kod HTML, aby uzyskać zawartość arkusza stylów ze specjalnymi regułami CSS '@font-face',
- do treści powyższego arkusza stylów dodać zwykłe reguły CSS ustalające dla tekstów elementów na blogu fonty, których nazwy występują w regułach '@font-face'.
 

csslab
 
Serwis Google z fontami udostępnia cztery widoki wybieranych krojów pisma. Dostępne są one za pomocą zakładek na górze strony, a są to: 'Word', 'Sentence', 'Paragraph' i 'Poster'. Każdy z tych widoków ma w zasadzie inne przeznaczenie i pomaga znaleźć czcionki na odmienne cele.
Widok 'Word' przedstawia więcej fontów na tej samej powierzchni niż inne widoki, co umożliwia szybsze przeglądanie i porównywanie krojów pisma. Widok nadaje się raczej do szukania czcionek na większe nagłówki, ponieważ wielkość liter jaką można ustawić to zakres od 64 do 120 pikseli, a widoczny przykładowy tekst to zaledwie krótkie słowo.

google_wybor_1.png


Zakładka 'Sentence' jest otwarta podczas wejścia na stronę serwisu. Jest ona najbardziej uniwersalna podczas szukania fontów. Oferuje najszerszy zakres dostępnych wielkości fontów, a przykładowy tekst składa się z jednego wiersza zdania. Widok nadaje się do przeglądania fontów dla np.: nicka blogu (oryginalna wielkość to 36 pikseli), tytułu wpisów (16 pikseli), etykiet (np. 'Szukaj blogów', 14 pikseli) jak i tekstu wpisów (12 pikseli).

google_wybor_2.png


Widok 'Paragraph' prezentuje fonty w postaci dłuższych bloków tekstu o wymiarach czcionki od 9 do 12 pikseli. Jeżeli ktoś szuka fontu dla tekstów we wpisach, ten widok jest do tego stworzony.

google_wybor_3.png


Zakładka 'Poster' jest nieco odmienna od pozostałych, gdyż jej przeznaczenie to prezentacja fontów przy wykorzystaniu różnych efektów wizualnych, wybieranych z górnej rozwijanej listy 'Appearance'. Nie mamy tutaj możliwości edycji tekstu, a wielkości czcionek to zakres od 28 do 120 pikseli.

google_wybor_4.png


Przydatne narzędzia podczas przeszukiwania fontów w 'Google Web Fonts' znajdują się w kolumnie po prawej stronie. Pozwalają one przyspieszyć proces wyboru eliminując z listy te czcionki, które nie pasują do wytycznych – w związku z tym lista czcionek do przeszukania jest krótsza. Na samej górze do dyspozycji mamy wyszukiwarkę. Wystarczy już wpisać kilka liter nazwy lub autora fontu, a pojawiają się odpowiednie pozycje.
Następnie poniżej wyszukiwarki mamy filtry. W liście rozwijanej, na której na początku jest napis 'All categories', możemy zaznaczyć odpowiednie typy fontów. Pierwszy typ 'Serif' oznacza czcionki, w których główne kreski znaków posiadają ukośne lub prostopadłe zakończenia tzw. szeryfy (np. krój pisma Times New Roman). Typ 'Sans Serif' to czcionki, które nie posiadają szeryfów (np. Arial). 'Display' to fonty, które prezentują się najlepiej w większych rozmiarach, np. w napisach, a niekoniecznie w blokach tekstu o małej wielkości czcionki. Ostatni typ na liście to 'Handwriting', czyli fonty imitujące pismo odręczne. Poniżej listy mamy kolejne filtry, które mają wyodrębnić kroje pisma o podobnych cechach. Ustawia się je za pomocą odpowiednich suwaków. Można wybrać kilka tych filtrów jednocześnie – co jeszcze bardziej zmniejszy zakres dostępnych fontów. Są to: 'Thickness' – filtrowanie tutaj odnosi się do grubości kreski znaku, 'Slant' – czyli filtr stopnia nachylenia fontów, 'Width' -  filtr uwzględniający szerokość znaków.

Pod spodem filtrów znajdziemy listę rozwijaną 'Script', dzięki której możemy wybrać pismo alfabetyczne, jakie ma być obsługiwane przez font lub inaczej, jaki zestaw znaków ma zawierać konkretny font. Większość z krojów pisma w serwisie zawiera podstawowy alfabet łaciński wraz z cyframi i znakami specjalnymi ( Na liście rozwijanej jest to pozycja pod nazwą 'Latin' ). Poza tym kroje te mogą zawierać inne zestawy znaków jak Cyrylicę ( 'Cyrillic', ' Cyrillic Extended' ), czy alfabet grecki ( 'Greek', 'Greek Extended' ). Ważnym dla tekstów w języku polskim jest zestaw 'Latin Extended', gdyż zawiera on polskie litery diakrytyczne. Wybierając więc jakąś pozycję z listy 'Script' wyświetlane zostają fonty zawierające pasujący zestaw znaków i możliwe, że jeszcze jakiś inny zestaw. Może się jednak zdarzyć, że font posiada konkretny zestaw, ale nie występują w tym zestawie wszystkie znaki. Na przykład wiele czcionek w zestawie ' Latin Extended' ma zdefiniowane litery 'ł', 'ń', 'ó', ale już nie znajdziemy tam takich liter jak 'ą' czy 'ę'. Zatem, jeśli zależy nam na polskich literach i wybierzemy z listy 'Script' pozycję 'Latin Extended', powinniśmy dodatkowo sprawdzić, czy zestaw znaków wybranego kroju pisma posiada na pewno wszystkie te dodatkowe litery diakrytyczne, specyficzne dla języka polskiego. Mamy w tym przypadku dwie możliwości, aby to zrobić. Jedną z nich to wpisanie własnego tekstu w polu 'Preview Text', który zawierał będzie wyżej wymienione litery. Drugi sposób to otwarcie dodatkowego okna, gdzie zawartych jest więcej informacji na temat wybranego fontu. Znajduje się tam również zestaw znaków danego fontu – jeżeli jakiś znak nie jest w zestawie zdefiniowany, pojawia się zamiast niego szary krzyżyk. Powyższe okno otwiera się przyciskiem 'Pop out' znajdującym się pod spodem każdego wyświetlanego fontu.

google_wybor_5.png


Na samym dole lewej kolumny znajdziemy jeszcze przełącznik 'Show/Hide all styles'. Pozwala on wyświetlić lub ukryć wszystkie style jakie posiada dany krój pisma. Podobną funkcję ma przycisk 'See/Hide all styles', który pojawia się pod każdym fontem posiadającym więcej niż jeden styl.

google_wybor_6.png


Samo przeglądanie listy fontów jest tak rozwiązane, że ilość wyświetlanych pozycji zwiększa się wraz z przewijaniem tej listy w dół. Niestety przełączenie zakładki np. 'Sentence' na 'Word' i z powrotem sprawi, że nie zachowa się wyświetlana pozycja listy przed przełączeniem zakładek i zobaczymy font, który znajduje się prawie na samej górze listy.

Fonty do kolekcji dodajemy za pomocą niebieskiego przycisku 'Add to Collection'. Po kliknięciu na niego zamienia się on w szary przycisk 'Remove from Collection', który z kolei służy do usunięcia danej pozycji z kolekcji. W momencie dodania tło bloku, w którym znajduje się wybrany font, zmienia się na kolor szary, a na dole strony zostaje zaktualizowana lista pozycji w kolekcji. Jeżeli font posiada wiele stylów, możemy zaznaczyć te, które chcemy w kolekcji. Wraz z dodaniem pierwszego fontu do zbioru w kolumnie po lewej stronie pojawia się przełącznik 'Show Collection only/Show all families', który umożliwia wyświetlanie albo tylko fontów znajdujących w kolekcji, albo ich wszystkich.

Dolna niebieska część strony może być rozwijana lub zwijana za pomocą przycisku reprezentowanego za pomocą dwóch strzałek skierowanych w dół lub w górę. Wyświetlana jest w tej części lista fontów występujących w kolekcji. Każda pozycja zawiera nazwę kroju pisma napisaną przy pomocy tego właśnie kroju oraz zawiera jego style. Przy każdym stylu jest krzyżyk, który usuwa dany styl. Krzyżyk umieszczony jest również na końcu każdej pozycji – jego funkcją z kolei jest usunięcie z kolekcji całego fontu. Jeśli chcemy zlikwidować wszystkie fonty, możemy skorzystać z przycisku na samym dole o nazwie 'Remove all families from Collection'.

google_wybor_6a.png


Jeśli wiemy, że będziemy potrzebować tylko jedną czcionkę, wcale nie musimy tworzyć kolekcji. Wystarczy, że skorzystamy z przycisku 'Quick-use' znajdującego pod każdym fontem, który od razu przeniesie nas do sekcji związanej z osadzaniem fontu na stronie. Powyższego przycisku możemy także użyć w trakcie tworzenia kolekcji, co nie będzie miało na tą kolekcję wpływu.
Należy też wspomnieć, że istnieje możliwość zapamiętania stworzonej przez nas kolekcji fontów na później. Robimy to klikając na znajdujący się na górze po prawej stronie link 'Bookmark your Collection' i kopiując następnie wygenerowany adres, który się pojawi w wyskakującym okienku.
Wchodząc następnym razem na serwis 'Google Web Fonts' za pomocą skopiowanego poprzednio adresu mamy już zaznaczone wcześniej, odpowiednie fonty. Adres ten może się również przydać, jeżeli chcemy podzielić się swoją kolekcją z inną osobą.

google_wybor_7.png
 

csslab
 
Osadzanie własnych krojów pisma na blogu w serwisie 'pinger.pl' może sprawiać trudność. Na szczęście istnieją serwisy specjalizujące się w hostingu fontów. Jednym z nich jest 'Google Web Fonts', który można znaleźć pod adresem internetowym 'www.google.com/webfonts/'. Zaletą tego serwisu jest to, że oferuje on czcionki, które są darmowe i można ich używać bez ograniczeń.
Wchodząc na stronę 'Google Web Fonts' po raz pierwszy ukazuje nam się ona mniej więcej tak:

Wlasne_kroje_pisma_google_1.png


Po lewej stronie mamy kolumnę, gdzie umieszczonych jest kilka przydatnych narzędzi takich, jak pole tekstowe wyszukiwarki fontów, czy flitry, które kontrolują rodzaj wyświetlanych fontów znajdujących się w bloku po prawej stronie. Na górze strony znajdują się zakładki, które pozwalają wybrać sposób prezentacji czcionek oraz narzędzia do zmiany wyświetlanego, przykładowego tekstu, zmiany wielkości czcionki oraz ustalenia kolejności wyświetlanych czcionek. Poza tym na górze przy zakładkach znajduje się kilka linków, m.in. 'Bookmark your Collection', który pozwala stworzyć pewnego rodzaju zakładkę w postaci adresu internetowego, dzięki której możemy wrócić do przerwanej poprzednio pracy przy tworzeniem naszej kolekcji fontów. Natomiast link 'Download your Collection', jak można się domyślić, pozwala ściągnąć nam naszą kolekcję na dysk lokalny, dzięki czemu możemy na przykład używać tych czcionek na naszym komputerze. Ściągnięte, spakowane fonty są w formacie TrueType (.ttf). Każdy blok z prezentowanym fontem zawiera przykładowy tekst dla jednego ze stylów danego fontu, na dole po lewej stronie wyświetla nazwę fontu i informację o jego autorze. Na dole, po prawej stronie bloku znajdziemy też kilka przycisków: 'See/Hide all styles' pozwala wyświetlić lub schować teksty we wszystkich stylach danego fontu; 'Quick-use' otwiera sekcję serwisu, która pomoże nam w osadzeniu konkretnego fontu, a nie całej ich kolekcji; 'Pop out' otwiera okno z dodatkowymi informacjami o foncie, przykładowymi tekstami w danym foncie oraz zestawem znaków jakie zawiera dany font; ostatni przycisk 'Add to Collection/Remove from Collection' dodaje lub usuwa font z kolekcji.

Wlasne_kroje_pisma_google_1a.png


Na dole strony na niebieskim tle przedstawiane są czcionki dodane do naszej kolekcji. Umieszczone tam są również trzy przyciski, które przełączają nas do innych sekcji serwisu. Przycisk 'Choose' przeniesie nas do miejsca, w którym znajdujemy się na początku, czyli do sekcji wyboru fontu. Przycisk 'Review' z kolei wyświetli sekcję, dzięki której będziemy mogli zarządzać naszą kolekcją fontów, testować wygląd tekstów przy zastosowaniu tych czcionek lub porównywać między sobą poszczególne znaki owych fontów.

Wlasne_kroje_pisma_google_2.png


Sekcja trzecia, którą otwieramy przy pomocy przycisku 'Use', związana jest z osadzaniem wybranych fontów na własnej stronie internetowej i podzielona jest na cztery części. Pierwsza z nich pozwala na wybranie stylów fontów, jakie chcemy mieć do dyspozycji na stronie. Zawarty też jest wskaźnik, który informuje o ilości danych związanych z pobieraniem fontów w momencie wyświetlania naszej strony.

Wlasne_kroje_pisma_google_3.png


Druga część pozwala wybrać zestaw znaków spośród tych, które oferują fonty z naszej kolekcji. Ważny dla polskich znaków jest zestaw 'Latin Extended (latin-ext)'.

Wlasne_kroje_pisma_google_4.png


Część kolejna oferuje trzy sposoby na osadzenie fontów na naszej stronie: poprzez kod HTML z tagiem 'link', kod CSS z dyrektywą '@import' oraz kod 'Javascript'. Dla użytkowników serwisu 'pinger.pl' najlepszą opcją jest wykorzystanie pierwszego kodu HTML z tagiem 'link'.

Wlasne_kroje_pisma_google_5.png


Ostatnia część przedstawia przykładowe kody CSS, jakie trzeba umieścić na własnej stornie internetowej, aby można było wykorzystać osadzone fonty przy konkretnych blokach tekstu na stronie.

Wlasne_kroje_pisma_google_6.png
 

csslab
 
Fonty na stronie internetowej osadza się przy pomocy specjalnej reguły '@font-face'. Przykładowy kod CSS może wyglądać tak:

@font-face {
font-family: 'Super Nowy', sans-serif;
font-style: normal;
font-weight: normal;
src: local( 'Super Nowy Regular' ),
url(plik.eot) format( 'embedded-opentype' ),
url(plik.woff) format( 'woff' ),
url(plik.ttf) format( 'truetype' );
}

@font-face {
font-family: 'Super Nowy', sans-serif;
font-style: normal;
font-weight: bold;
src: local( 'Super Nowy Bold' ),
url(plik-bold.eot) format( 'embedded-opentype' ),
url(plik-bold.woff) format( 'woff' ),
url(plik-bold.ttf) format( 'truetype' );
}

Wyjaśnię poszczególne części opisu tej reguły.

Deskryptor 'font-family' ustala nazwę kroju pisma, jaką będziemy się posługiwać w innych częściach arkusza stylów, np. poniższy kod ustala, że nick na blogu będzie wyświetlony fontem 'Super Nowy':

div.profil-info h2 {
font-family: 'Super Nowy';
}

Opcjonalna wartość po przecinku 'sans-serif' określa, jaki rodzaj kroju pisma będzie wykorzystany w razie niepowodzenia podczas ładowania fontu. Możliwe wartości to: 'serif', 'sans-serif', 'cursive', 'fantasy', 'monospace'. Jeśli nie wprowadzimy tej wartości w regule '@font-face', zawsze można to zrobić podczas ustalania fontu konkretnego elementu:

div.profil-info h2 {
font-family: 'Super Nowy', sans-serif;
}

Deskryptor 'font-style' określa styl ładowanego fontu. Jeżeli wartością tego deskryptora nie jest 'all', to może zawierać więcej wartości oddzielonych przecinkami, takimi jak: 'normal', 'italic' czy 'oblique'. Jeżeli pominiemy 'font-style' w regule '@font-face' ustalona zostanie wartość 'normal'. Deskryptor ten połączony jest z właściwością o tej samej nazwie stosowaną przy określaniu stylu czcionek tekstu jakiegoś elementu. Dla przykładu określimy czcionkę pochyłą dla naszego nicka:

div.profil-info h2 {
font-family: 'Super Nowy', sans-serif;
font-style: italic;
}

Jeżeli nie zostanie stworzona reguła '@font-face' dla plików z fontami pochyłymi, tekst zostanie w tym przypadku pochylony przez przeglądarkę – co niekiedy może sprawić, że wygląd tekstu będzie nieestetyczny.

Deskryptor 'font-weight' podobnie działa jak 'font-style', lecz odnosi się do wagi lub grubości fontu. Wartości to: 'all' lub 'normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'. Wartość '400' jest równoznaczna z 'normal', a '700' z wartością 'bold'. Jeśli pominiemy deskryptor, ustalona zostanie wartość 'normal'. Brak specjalnego fontu dla tekstu pogrubionego sprawi, że przeglądarka pogubi czcionkę sama. Nasz nick napisany wytłuszczonym fontem:

div.profil-info h2 {
font-family: 'Super Nowy', sans-serif;
font-weight: bold;
}

Deskryptor 'src' ustala źródło pliku fontu. Może składać się z kilku wartości oddzielonych przecinkami, z tym, że liczy się tutaj kolejność wstawianych wartości – na początku będą ładowane pliki wstawione jako pierwsze. Jeżeli skorzystamy z funkcji 'local' jak w powyższym przykładzie: 'local( 'Super Nowy Regular' )', przeglądarka spróbuje odnaleźć font o podanej nazwie na lokalnym komputerze odwiedzającego stronę internetową. Jeżeli zakończy się to sukcesem, wykorzysta ten font i zaprzestanie odczytywać kolejne wartości deskryptora 'src'. Jeśli program natrafi na funkcję 'url' jak np.: 'url(plik.woff)', spróbuje pobrać plik znajdujący pod podanym adresem. Jeśli się to nie uda lub plik jest w formacie nie obsługiwanym przez przeglądarkę, przeglądarka przeskoczy do kolejnej wartości, w przeciwnym wypadku, program zastosuje załadowany font i przestanie szukać kolejnych wartości. Funkcji 'url' może towarzyszyć po spacji określenie formatu danego pliku fontu, który ma ściągnąć jak np.: 'url(plik.woff) format( 'woff' )'. Spowoduje to, że przeglądarka zanim ściągnie plik fontu sprawdzi, czy obsługuje dany format, i jeśli tak nie jest, pominie ten plik i sprawdzi kolejną wartość.
Niestety nie wszystko w praktyce wygląda tak, jak wygląda w teorii. Utrudnienia przynosi nam tutaj Internet Explorer do wersji ósmej włącznie. Po pierwsze nie rozumie ta przeglądarka funkcji 'local' w deskryptorze – jeżeli na nią natrafi, pomija cały wiersz z 'src' i czyta następny. Po drugie program źle odczytuje wiersz w przypadku, kiedy po określeniu adresu fontu przez funkcję 'url' po spacji podany jest format pliku. Chodzi o to, że Explorer traktuje całą zawartość wiersza jako adres fontu i dopiero zatrzymuje się na średniku na końcu wiersza. To oczywiście powoduje, że adres jest błędny i nie zostaje załadowany plik z fontem. Stosuje się kilka technik, aby temu zaradzić. Jedna to taka, że tworzy się dwa deskryptory 'src' – pierwszy specjalnie dla IE, kolejny z funkcją 'local' dla pozostałych przeglądarek. Program trafiając na wiersz z 'local', pomija go zostając przy pierwszym. Niekiedy dla 'local' podawane są wartości zupełnie nie związane z nazwami fontów lokalnych. Przykładowy kod:

@font-face {
font-family: 'Super Nowy', sans-serif;
font-style: normal;
font-weight: normal;
src: url(plik.eot);  /* dla IE8 */
src: local( 'Super Nowy Regular' ),  /* dla pozostałych */
url(plik.eot) format( 'embedded-opentype' ),
url(plik.woff) format( 'woff' ),
url(plik.ttf) format( 'truetype' );
}

Inna technika, która ma zaradzić błędnemu działaniu przeglądarki IE8, to dodanie na końcu adresu pliku fontu przeznaczonego dla niej znaku zapytania, lub nawet lepiej znaku zapytania, krzyżyka (inaczej płotek czy hash) oraz litery lub kilka liter, np.: '?#iefix'. Rozwiązanie to sprawia, że IE8 nadal błędnie tworzy adres internetowy fontu, lecz tym razem dodatkowe, niepotrzebne znaki znajdujące się za naszym znakiem zapytania, hashem i literami nie są już groźne i nie mają więcej żadnego znaczenia dla głównej części naszego adresu. Kod CSS:

@font-face {
font-family: 'Super Nowy', sans-serif;
font-style: normal;
font-weight: normal;
src: url(plik.eot?#iefix) format( 'embedded-opentype' ), url(plik.woff);
}

Do tego wszystkiego dochodzi jeszcze jeden problem. Umieszczając któryś z powyższych kodów CSS z regułą '@font-face' w polu tekstowym 'CSS' w ustawieniach blogu na 'pinger.pl' otrzymamy komunikat: 'Błąd składni CSS'. Mechanizm weryfikujący poprawność wprowadzanych własnych kodów CSS w tym serwisie nie akceptuje słów 'local' i 'format' w regule '@font-face'. Mamy w tym przypadku dwa wyjścia: albo z kodu usuniemy wymienione słowa, albo będziemy musieli skorzystać z sekcji 'Zewnętrzne statystyki', gdzie wprowadzimy np. link do zewnętrznego arkusza stylów z regułą '@font-face', np.: '<link rel="stylesheet" type="text/css" href="adres.arkusza.css" /> '. Istnieje jednak pewne prawdopodobieństwo, że z kolei drugi sposób nie zostanie pozytywnie przyjęty tym razem przez moderatora serwisu. W związku z tym, kiedy pozostaniemy przy opcji z usunięciem słów, nasz kod CSS, który zostanie zaakceptowany przez mechanizm weryfikujący na 'pinger.pl', może wyglądać tak:

@font-face {
font-family: 'Super Nowy';
font-style: normal;
font-weight: normal;
src: url(przyklad.pl/plik.eot?#iefix), url(przyklad.pl/plik.woff);
}
 

csslab
 
Najpierw krótko wyjaśnię pewne pojęcia oraz zależności między nimi. Krój pisma to zestaw znaków o podobnych cechach ( np. 'Arial' ). Składa się z fontów, czy plików określających kształt tych znaków. Każdy plik fontu jest przeważnie odpowiedzialny tylko za jeden styl lub wagę (grubość) zestawu znaków danego kroju pisma. Można powiedzieć, że font to zestaw czcionek, choć tak naprawdę słowem czcionka określa się kawałek metalu z uformowanym kształtem znaku pisma stosowany przy druku tradycyjnym. Niekiedy potocznie nazwą 'czcionka' określa sam font lub krój pisma, tak samo jak wyraz 'font' stosowany jest w przypadku, kiedy ma się na myśli krój pisma.
Aby korzystać z jakiegoś kroju pisma na stronie internetowej, który nie jest np. powszechnie stosowany w systemach komputerowych, musimy mieć dostęp do pliku fontu tego kroju w odpowiednim formacie, który umieszczony jest gdzieś na serwerze podłączonym do internetu. Poza tym, jeżeli dany plik z fontem znajduje się na innej domenie niż plik ze stroną internetową, która z tego fontu korzysta, wymieniony wcześniej zewnętrzny serwer musi być odpowiednio skonfigurowany. Chodzi o to, że program Firefox zaakceptuje font serwowany z innej domeny tylko wtedy, kiedy przeglądarka w odpowiedzi z serwera znajdzie specjalny nagłówek z treścią: 'Access-Control-Allow-Origin: * ', gdzie gwiazdka może być zastąpiona nazwą domeny np.: 'pinger.pl'. To może być dosyć uciążliwe utrudnienie zwłaszcza, kiedy dysponujemy fontem na dysku naszego komputera i chcemy go umieścić w sieci nie dysponując własnym serwerem. Powyższe ograniczenie dostępu sprawia również to, że bezużyteczne staje się osadzanie plików fontów w załączniku wpisu do blogu. W związku z tym dobrym rozwiązaniem może być tutaj skorzystanie z usług takich jak 'Google Web Fonts' pod adresem 'www.google.com/webfonts'.
Jest kilka formatów plików fontów obsługiwanych przez przeglądarki internetowe. Niestety żaden z nich nie jest uniwersalny, a więc taki, który byłby na dzień dzisiejszy rozpoznawalny przez wszystkie nowoczesne przeglądarki. Chyba najszerzej obsługiwany format to 'TrueType' o rozszerzeniu nazwy pliku '.ttf' – większość fontów w systemie Windows to pliki w tym formacie. Jak na złość Internet Explorer 8 i starsze nie wyświetlą nam czcionek w TrueType. Dla nich przeznaczony jest inny ich własny format, a mianowicie 'Embedded OpenType' o rozszerzeniu '.eot'. Natomiast formatem, który został wybrany przez organizację World Wide Web Consortium (W3C) jako nośnik dla internetu, jest 'Web Open Font Format' ( rozszerzenie '.woff' ) – obsługiwany jest przez większość przeglądarek desktopowych i wiele mobilnych.
Trzeba mieć na uwadze kilka rzeczy osadzając własne czcionki na stronie:
- Nie wszystkie fonty, które używa się na lokalnym komputerze, ze względu na licencję można zastosować na stronie internetowej.
- Im więcej fontów umieścimy na stronie, tym dłużej będzie się ona ładowała, zwłaszcza za pierwszym razem. Później przeglądarka stara się korzystać z czcionek umieszczonych w pamięci, lub nie ściągać, gdy plik z fontem na serwerze się nie zmienił.
- Tekst, który ma być wyświetlony czcionką pobieraną z serwera, na czas pobierania pliku nie będzie wyświetlony w ogóle lub będzie wyświetlony czcionką standardową.
- Krój pisma, którego font pochodzi z zewnątrz, nie zawsze prezentuje się tak samo we wszystkich przeglądarkach – warto uruchomić stronę w wielu programach, aby sprawdzić jak wygląda.
- Wiele krojów pisma nie posiada polskich znaków. Znaki te w tekście, który korzysta z takiego kroju, będą wyświetlone czcionką standardową.
- Fonty mają różne proporcje i mimo, że ustawimy rozmiar czcionki za pomocą właściwości CSS 'font-size' na tą samą wartość, przeważnie uzyskamy różne szerokości tekstu przy różnych fontach.
 

pingback
 
Narzędzie, które generuje kod CSS, umożliwiający osadzenie własnych fontów z serwisu 'Google Web Fonts'.
Adres:'pingback.pl/2012/09/12/google-web-fonts/'
 

saito
 
Klikając w poniższy link znajdziecie porównanie różnych technik embedowania fontów na stronie www, włączając w to czasy ładowania się fontów.
www.artzstudio.com/(…)web-font-performance-weighing…
 

saito
 
Poniższy tutorial pokazuje, jak korzystać z narzędzia subsetter ( www.subsetter.com/ ), które umożliwia automatyczną edycję fontów polegającą na zmniejszeniu wagi pliku poprzez usunnięcie z niego niechcianych znaków. Można przykładowo zmienić 600KB plik ttf na 60KB plik ttf, który zawiera tylko litery występujące w alfabecie polskim.

fontfeed.com/(…)fontfont-subsetter-elegantly-slims-…
subsetter_Hungarian_500.jpg

FontFont-Subsetter_main.png
 

saito
 
www.josbuivenga.demon.nl/index.html
UWAGA: nie można pobrać bezpośrednio przez podaną stronkę - na dole znajdują się linki do serwisów, za pośrednictwem których można dokonać zakupu za 0$ - niestety trzeba się zarejestrować itp.)
 

saito
 
Monotype® Library, OpenType® Edition (1,350 fontów | €4,499 na 20 komputerów)
mtot.jpg

Wszystkie fonty(podgląd w pdf):
www.monotypefonts.com/opentype/onlinecatalogue.asp

---------------------------------------------------------
Adobe® Type Collection, OpenType® Edition (2300+ fontów | €5600 z VAT za 10 stanowisk)
adot.jpg

Wszystkie fonty(podgląd w pdf):
www.monotypefonts.com/(…)onlinecatalogue.asp…

---------------------------------------------------------
ITC Library, OpenType Edition (1,200 fontów | €3599 netto czyli €4400 z VAT)
itcot.jpg

Wszystkie fonty(podgląd w pdf):
www.monotypefonts.com/(…)onlinecatalogue.asp…

---------------------------------------------------------
Adobe® Font Folio® 11 (2,300 fontów | €3,626 za 5 stanowisk i €6,653 za 10 - ceny u Adobe i w polskim sklepie sa takie same)
box_fontfolio11_112x112.jpg

Link do listy fontów (tylko nazwy):
www.adobe.com/(…)fontfolio11_font_list.pdf…

---------------------------------------------------------
Bitstream Type Odyssey 2 (1,450+ fontów | €1,495 za 20 stanowisk)
boxsmall_odyssey2.jpg

Wszystkie fonty (podgląd w pdf):
www.terrapin.co.uk/services/to2_catalog-1.pdf

---------------------------------------------------------
EF Special Edition Font CD (500 fontów | €777 za 5 stanowisk)
EF-Special.gif

Lista fontów (tylko nazwy):
www.fontshop.com/(…)ef_special_edition_font_cd…

---------------------------------------------------------
The Linotype Originals 2.0 (1710 fontów | €4600 netto = €5612 z VAT na 10 stanowisk)
linotype2.jpg

www.linotype.com/304075
Podgląd fontów:
/thelinotypeoriginalsopentypeeditionversiontwo-compilation.html
---------------------------------------------------------
URW Edition (1000 fontów | €499 netto = €609 z VAT)
URW_Edition.gif

Podgląd fontów(5x pdf):
www.mojefonty.pl/produkt/URW_Edition
 

saito
 
Ciekawy artykuł o stosowaniu kontrastu i wielkości czcionek przy projektowaniu www (w szczegółności mowa o treści artykułu - dłuższy tekst). Nie zgadzam się tylko z mocno zaakcentowanym postulatem o stosowaniu fontów nie miejszych niz 16px. Moim zdaniem najbardziej optymalną wielkością dla czcionki Arial to 14px z interlinią 23. Ewentulanie Arial 13/interlinia18 lub Arial 16/interlinia 24. Dla leadów dobrze wyglądają: Tahoma 12/i18 lub Arial 12/i17.
Link do artykułu:
uxdesign.pl/czytanie-na-100/
 

saito
 
Kilka dobrych źródeł opisujących dlaczego Arial, będąca czcionką-klonem czcionki Helvetica jest wszechobecna i dlaczego profesjonalni projektanci jej nie stosują:

www.ms-studio.com/articles.html:
"When Microsoft made TrueType the standard font format for Windows 3.1, they opted to go with Arial rather than Helvetica, probably because it was cheaper and they knew most people wouldn’t know (or even care about) the difference. Apple also standardized on TrueType at the same time, but went with Helvetica, not Arial, and paid Linotype’s license fee. [...]
The situation today is that Arial has displaced Helvetica as the standard font in practically everything done by nonprofessionals in print, on television, and on the Web, where it’s become a standard font, mostly because of Microsoft bundling it with everything—even for Macs, which already come with Helvetica. This is not such a big deal since at the low resolution of a computer screen, it might as well be Helvetica. In any case, for fonts on the Web, Arial is one of the few choices available."

Arial jest połączeniem Helvetica i Grotesque:
www.ms-studio.com/articlesarialsid.html

Niektórzy jednak nie wytykają palcem twórców Arial jako złodziei:
"What it’s wrong to do is criticize Arial as a clone or rip-off of Helvetica. It’s not. If Arial is a rip-off of Helvetica, then Helvetica is a rip-off of Akzidenz Grotesk; or we could simply say that they are both rip-offs of earlier Grotesque faces. The whole rip-off debate is a rather pointless one, I feel. Every face should be considered on its own merit. (We don’t criticise a daughter for looking like her mother.)"( ilovetypography.com/(…)arial-versus-helvetica… )
 

saito
 
Stronka z darmowymi fontami:
www.1001freefonts.com/

Dorzuce do tego typester, stronkę, na której można porównac jak wygląda przykładowy tekst przy różnych ustawieniach fonta:
www.typetester.org/

Plus kilka słów na temat fontów (anatomia fontów stosowanych na sieci):
www.sitepoint.com/article/anatomy-web-fonts
 

saito
 
Zastanwaialiście sie kiedys jak dociec jakiej czcionki użyto w danej publikacji? Spodobał Wam sie font ale ni potraficie go znaleźć?
Oto rozwiązanie: stronka, która na podstawie wrzuconej grafiki lub podania adrsu URL, podaje jakiej czcionki użyto:
www.myfonts.com/WhatTheFont/
 

 

Kategorie blogów