#21. Czcionki ładne i inne🅰🅱

Tekst jest głównym składnikiem dzisiejszych stron www. Dlatego projektując stronę internetową warto zwrócić uwagę aby typ, kolor czcionek oraz wielkość były odpowiednie. 

Fonty systemowe

W kontekście tekstu najczęściej ustalamy typ fontu za pomocą właściwości: font-family. Kolejnym krokiem jest podanie nazwy (rodziny).

Decydując się na daną rodzinę fonta, musimy założyć, że internauta będzie ją miał wgraną w systemie swojego komputera. Dobrą praktyką jest wybór fontu, która jest zazwyczaj na każdym komputerze (Arial, Tahoma, Verdana, Georgia).

Jeśli wybierzemy font, której użytkownik nie ma na komputerze to strona wyświetli mu się z jego domyślną fontem, najczęściej jest to “Times New Roman”.

Ciekawostka: Nazwy fontów składające się z kilku słów podajemy w regule CSS w cudzysłowach (np. font-family: “Times New Roman”; ), a składające się z jednego słowa bez cudzysłowów (np. font-family: Arial; ).

Spójrz na prosty przykład. Zapewne jak śledzisz moje posty to już to znasz tą właściwość, tzn. font-family. Traktuje to jako rozgrzewkę😉

frosty-sound-59qfe

frosty-sound-59qfe by danielminschinski

Fonty podpinane

Fonty systemowe nie dają dużego pola do popisu. Czasem chcemy użyć fontu, która ma wyjątkowy krój. Możemy taką kupić bądź skorzystać z darmowych źródeł.

Popularnym źródłem darmowych fontów jest zbiór Google Fonts: www.google.com/fonts Znajdziesz tam nie tylko same fonty, ale również niezbędne instrukcję dołączania ich na swoją stronę.

W pliku html w sekcji head dodajemy następujący kod:

 

Następnie w CSS odnosimy się do niej jak do normalnego fontu systemowego. Spójrz na poniższy przykład i zapoznaj się ze sposobem dodawania zewnętrznego fontu:

objective-swartz-p611d - CodeSandbox

objective-swartz-p611d by danielminschinski

Link jako odwołanie do fontu CSS

Istnieje inny sposób na załadowanie nowego fontu do naszej strony. Nie musimy dodawać do sekcji head odwołania do fonta.

Możemy to zrobić za pomocą zapisu w pliki CSS:

@import url(link-do-fonta);

Dzięki powyższemu zapisu mamy zachowany podział pliku CSS z definiującymi zapisami wyglądu strony oraz pliku HTML ze strukturą i treścią strony. W poniższym przykładzie w stylach dodałem import z nowym fontem. W regule body odniosłem się do fonta Lato:

reverent-gould-hrkc8

reverent-gould-hrkc8 by danielminschinski

Różne typy fontów

Wszystkie fonty mają przypisaną pewną właściwość określająca charakter. Niektóre są bardziej formalne, inne mniej.

Rozróżniamy następujące typy fontów:

  • szeryfowe (serif) są fontami z dodatkowymi elementami ozdobnymi (np. kreseczki na górze i dole w literce “l” np. “Times”,
  • bezszeryfowe (sans serif) są fontami bez dodatkowych ozdobników, np. “Arial”,
  • o stałej szerokości (monospace) są fontami w których każdy znak zajmuję taką samą przestrzeń, używana do prezentacji kodu, np. “Courier”,
  • pisanki (handwriting) są fontami imitujące pismo odręczne, np. “Comic Sans”. 

Aby móc skorzystać z alternatywnego fontu, zastępujący font “pierwszy” należy zastosować odpowiedni zapis w regule stylów: font-family: Arial, …; (w miejscu dwukropka wstawiamy odpowiedni font). 

Ćwiczenie

  1. Stwórz nowy projekt w codesandbox.
  2. Wygeneruj podstawową strukturę html oraz plik css.
  3. W ciele dokumentu utwórz div-a z klasą “container”.
  4. W kontenerze utwórz przykładowy nagłówek h1.
  5. Pod nagłówkiem h1 dodaj przykładowy nagłówek h2 z klasą “serif”.
  6. Pod nagłówkiem h2 dodaj przykładowy akapit.
  7. Pod akapitem dodaj kolejny nagłówek h2 z klasą “sans-serif”.
  8. Pod nagłówkiem h2 dodaj przykładowy akapit.
  9. Pod akapitem dodaj kolejny nagłówek h2 z klasą “monospace”.
  10. Pod nagłówkiem h2 dodaj przykładowy akapit.
  11. Pod akapitem dodaj kolejny nagłówek h2 z klasą “handwritting”.
  12. Pod nagłówkiem h2 dodaj przykładowy akapit.
  13. Zamknij kontener div-em.
  14. Dodaj importy do fontów kopiując poniższe odniesienia do pliku css:
  15. @import url(https://fonts.googleapis.com/css?family=Lora);
    @import url(https://fonts.googleapis.com/css?family=Open+Sans);
    @import url(https://fonts.googleapis.com/css?family=Inconsolata);
    @import url(https://fonts.googleapis.com/css?family=Pacifico);
  16. Dodaj regułę body. W środku umieść właściwość: background-color: silver;
  17. Dodaj kolejną regułę pod nazwą .container . W środku dodaj następujące właściwości: biały kolor tła, padding na 20px, maksymalna szerokość na 600px, automatyczny margines, zaokrąglenia obramowania na 6px.
  18. Kolejna reguła dotyczy nagłówka h1. Dodaj w nim wyśrodkowanie tekstu.
  19. Przechodzimy do naszych czcionek. Dodaj regułę .serif . W niej umieść właściwość font-family: Lora, serif;
  20. Dodaj regułę .sans-serif . W niej umieść właściwość font-family: Open Sans, sans-serif;
  21. Dodaj regułę .monospace . W niej umieść właściwość font-family: Inconsolata, monospace;
  22. Dodaj regułę .handwritting. W niej umieść właściwość font-family: Pacifico, cursive;
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ…

winter-water-vxqnv

winter-water-vxqnv by danielminschinski

Myślę, że za pomocą ćwiczenia wyjaśniłem różnicę między dostępnymi czcionkami. Każda rodzaj jest odpowiedni do danej treści. 

W kolejnym poście postaram się przybliżyć o metodach zawijania tekstu, ich edycji oraz transformacji. Po krótce pisałem już o tym wcześniej, ale teraz wgłębię się w temat🧐

Polecam zapisywać się do Newslettera ◀◀ oraz śledzenia Fb ◀◀

Do kolejnego❕🙂

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA