5/01/2015

Więcej polskich czcionek

Na Blogspocie nie ma zbyt wielu ciekawych czcionek/fontów/czy jakkolwiek inaczej. Mamy do wyboru te podstawowe albo bez polskich znaków, ale źle to wygląda. Oczywiście można temu zaradzić, ale do tego będzie nam potrzebny html i mała znajomość CSSa.

Wchodzimy na Google Fonts- stronę, która oferuje nam zbiór darmowych czcionek. W tym tych z polskimi znakami. Jednak nie ma ich strasznie dużo- przeważają te zwykłe. 
Aby wyświetliły nam się tylko polskie, musimy odpowiednio ustawić filtr.
Wybieramy Latin Extended z menu pod Script:


Niektóre fonty mają złe tagi, więc polecam wpisać "zażółć gęślą jaźń". W ten sposób będziemy widzieć, czy czcionka rzeczywiście ma wszystkie ogonki i kreski. Jeżeli zdecydujemy się na jakąś, klikamy zaznaczony kwadracik:


Zjeżdżamy w dół strony i wyświetlają nam się 2 kody- ten, który musimy wkleić w HTML bloga i drugi w CSS:


Wchodzimy w kod HTML:


Pod <head> wklejamy nasz pierwszy kod. W moim przypadku jest to:
<link href='http://fonts.googleapis.com/css?family=Slabo+27px&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Jeżeli nie możemy jakimś cudem znaleźć <head>, zawsze jest możliwość kliknięcia crtl+f i wpisania tej frazy w wyszukiwarkę. Wtedy nam znajdzie to słowo w kodzie. Ale jest on na samym początku, więc nie powinno być z tym trudności:


Niestety Google nie pomyślało, że są problemy z odczytywaniem niektórych znaków i jak wkleimy kod na sucho- nie zadziała. Aby to naprawić, we fragmencie &subset trzeba wcisnąć amp;. Natomiast na samym końcu /.
Kod wtedy będzie wyglądał tak:
<link href='http://fonts.googleapis.com/css?family=Slabo+27px&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'/>
Teraz kopiujemy kod CSS i przechodzimy do arkusza CSS (jak go znaleźć?). Niestety trzeba mieć o nim minimalne pojęcie, jeżeli nachodzi nas potrzeba zmiany czegoś innego niż podstawowych rzeczy.

Moim kodem jest:
font-family: 'Slabo 27px', serif;
Jest to fragment, który trzeba wklepać między { i } interesującego nas diva/spana/czegokolwiek innego. Zazwyczaj trzeba dokładnie określić ścieżkę do naszego tekstu.
Np.:
.PageList li a {
font-family: 'Slabo 27px', serif;}
A nie:
.PageList {
font-family: 'Slabo 27px', serif;}
Mi w drugim przypadku nie działało. Dlatego jak ktos nie potrafi sobie poradzić z określaniem dokładnej lub jakiejkolwiek ścieżki, podaję kilka:
.post-title a - tytuł posta
h1.title - tytuł bloga
.post-body - treść postów
.widget-content - treść widgetów
.PageList li a - strony

Korzystamy z nich na zasadzie:
ścieżka {kod z g.fonts}

1 komentarz:

  1. Bardzo fajnie! Podoba mi sie cały blog, a artykuły na bieżąco zamierzam czytać, bo można się wiele dowiedzieć.

    OdpowiedzUsuń