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
- Stwórz nowy projekt w codesandbox.
- Wygeneruj podstawową strukturę html oraz plik css.
- W ciele dokumentu utwórz div-a z klasą “container”.
- W kontenerze utwórz przykładowy nagłówek h1.
- Pod nagłówkiem h1 dodaj przykładowy nagłówek h2 z klasą “serif”.
- Pod nagłówkiem h2 dodaj przykładowy akapit.
- Pod akapitem dodaj kolejny nagłówek h2 z klasą “sans-serif”.
- Pod nagłówkiem h2 dodaj przykładowy akapit.
- Pod akapitem dodaj kolejny nagłówek h2 z klasą “monospace”.
- Pod nagłówkiem h2 dodaj przykładowy akapit.
- Pod akapitem dodaj kolejny nagłówek h2 z klasą “handwritting”.
- Pod nagłówkiem h2 dodaj przykładowy akapit.
- Zamknij kontener div-em.
- Dodaj importy do fontów kopiując poniższe odniesienia do pliku css:
- @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); - Dodaj regułę body. W środku umieść właściwość: background-color: silver;
- 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.
- Kolejna reguła dotyczy nagłówka h1. Dodaj w nim wyśrodkowanie tekstu.
- Przechodzimy do naszych czcionek. Dodaj regułę .serif . W niej umieść właściwość font-family: Lora, serif;
- Dodaj regułę .sans-serif . W niej umieść właściwość font-family: Open Sans, sans-serif;
- Dodaj regułę .monospace . W niej umieść właściwość font-family: Inconsolata, monospace;
- Dodaj regułę .handwritting. W niej umieść właściwość font-family: Pacifico, cursive;
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