Czcionki - CSS
Rodzaj czcionki {font-family}
Jak zmienić rodzaj (krój) czcionki? W jaki sposób maksymalnie zabezpieczyć się przed wyświetleniem tekstu niechcianym krojem czcionki?
Rodzaj czcionki {font-family}
selektor { font-family: rodzaj, rodzaj1, rodzaj2,... }Natomiast jako "rodzaj, rodzaj1, rodzaj2,..." należy podać rodzaje czcionek. Podanie kilku rodzajów spowoduje, że jeśli użytkownik nie będzie posiadał pierwszego, to zostanie wybrany następny w kolejności (można oczywiście podać tylko jeden rodzaj). Jeżeli nazwa czcionki składa się z kilku wyrazów, należy ją objąć w znaki apostrofu (np. 'Times New Roman', 'Courier New').
Polecenie pozwala wybrać konkretny krój czcionki.
UWAGA! Należy być ostrożnym z używaniem tego polecenia, ponieważ jeśli użytkownik oglądający Twoją stronę, nie będzie posiadał podanej czcionki w swoim systemie operacyjnym, tekst zostanie napisany czcionką domyślną (w Internet Explorerze będzie to najprawdopodobniej 'Times New Roman', chociaż to też nie jest pewne).
Poza tym nie każda czcionka potrafi zapisać poprawnie polskie znaki (w standardzie UTF). Koniecznie sprawdź rezultat w praktyce!
Korzystniej jest wypisać kilka rodzajów - wtedy zostanie użyta taka czcionka, którą pierwszą w kolejności podawania będzie posiadał użytkownik.
W systemie Windows standardowo dostępne powinny być czcionki: 'Times New Roman' (szeryfowa), Arial (bezszeryfowa), 'Courier New' (monotypiczna). Dodatkowo od jakiegoś czasu z Internet Explorerem dostarczane są: Verdana, Tahoma, 'Trebuchet MS', Georgia. Przy definiowaniu czcionki, dobrze jest wykorzystywać te właśnie rodzaje, a także takie które domyślnie występują w innych systemach operacyjnych (np. Helvetica - podobna do Arial).
Przykład {font-family}
To jest czcionka Arial
To jest czcionka 'Courier New'
To jest czcionka 'Times New Roman'
To jest czcionka Verdana
Rodziny ogólne {font-family: serif sans-serif monospace cursive fantasy}
Oprócz podania rodzaju czcionki wprost, możliwe jest także wpisanie rodziny ogólnej:
- serif - czcionka szeryfowa (końcówki znaków posiadają "ozdobniki"), np.: 'Times New Roman', Georgia, Garamond, Bodoni
- sans-serif - czcionka bezszeryfowa (końcówki znaków są proste), np.: Arial, Verdana, 'Trebuchet MS', Helvetica, Univers, Futura
- monospace - czcionka o stałej szerokości znaków - monotypiczna (wygląda, jak pisana na maszynie), np.: Courier, 'Courier New'
- cursive - czcionka mająca pewne cechy pochyłej (wygląda, jak pisana ręcznie)
- fantasy - czcionka fantazyjna (dekoracyjna)
body { font-family: Arial, Helvetica, Verdana, sans-serif }Taki sposób jest mocno zalecany, gdyż wtedy nawet jeśli użytkownik nie będzie posiadał żadnej z podanych czcionek, strona zostanie wyświetlona przy użyciu czcionki podobnej do zdefiniowanych, a nie domyślnej, która może zupełnie nie pasować do typografii naszej strony. Dlatego zawsze staraj się na końcu wpisywać rodzinę ogólną, do której należą czcionki, podane w pierwszej kolejności (najczęściej wykorzystuje się rodziny: serif lub sans-serif).
Niestety, ponieważ w takim przypadku to przeglądarka automatycznie dobiera rodzaj czcionki, może się zdarzyć, że wybierze czcionkę, która niepoprawnie zapisuje polskie znaki (tak się właśnie stało w mojej przeglądarce z rodziną fantasy). Chociaż jeśli chodzi o rodziny podstawowe (serif, sans-serif, monospace), wszystko powinno być w porządku.
Przykład {font-family: serif sans-serif monospace cursive fantasy}
To jest rodzina ogólna serif
To jest rodzina ogólna sans-serif
To jest rodzina ogólna monospace
To jest rodzina ogólna cursive
To jest rodzina ogólna fantasy
Pytania i odpowiedzi
Co robi "font-family"?
Właściwość font-family w CSS definiuje rodzaj czcionki, który ma być używany do wyświetlania tekstu na stronie. Można podać listę nazw rodzajów czcionek, aby przeglądarka wybrała pierwszą dostępną opcję na liście lub zastąpiła ją innym rodzajem czcionki, jeśli wybrana nie jest dostępna.
Jak ustawić rodzaj czcionki w CSS?
Rodzaj czcionki w CSS można ustawić za pomocą właściwości font-family, która określa preferowany rodzaj czcionki lub listę rodzajów czcionek do wyświetlenia. Na przykład: "font-family: 'Helvetica', sans-serif" ustawia czcionkę na "Helvetica" lub, jeśli nie jest dostępna, na czcionkę bezszeryfową.
Co oznacza "font-family: serif"?
Słowo kluczowe serif w właściwości font-family odnosi się do rodzaju czcionek z dodatkowymi zakończeniami (szeryfami) na literach. Czcionki "serif" są zazwyczaj bardziej formalne i czytelne w tekście drukowanym. Przykład: "font-family: 'Times New Roman', serif" używa czcionki "Times New Roman", a jeśli nie jest dostępna, to czcionki "serif".