Lista rodzin czcionek JavaScript

ast Python module | base64 Python module | code Python module | COM PHP module | dis Python module | Ev PHP module | exp | html Python module | http Python module | imp Python module | io Python module | JavaScript | os Python module | PS PHP module | Python functions | re Python module | select Python module | sep | site Python module | SPL PHP module | StackOverflow | time Python module | UI PHP module

Michael Zippo

Formatowanie tekstu na stronie internetowej jest ważną częścią projektowania stron internetowych. Na przykład możesz chcieć, aby nagłówki pojawiały się określoną czcionką lub aby cały tekst na stronie używał czcionki serif.

W tym miejscu CSS czcionka znajduje się: rodzina wchodzi w grę. Własność CSS font-family pozwala określić jedną lub więcej rodzin czcionek, które będą używane do stylizowania tekstu na stronie WWW.

Ten samouczek omówi podstawy, odnosząc się do przykładów CSS font-family i jak używać tej właściwości do stylizowania tekstu na stronie internetowej.

Rodzina czcionek CSS

Istnieje wiele aspektów związanych ze stylizacją czcionki w CSS, od ustawienia koloru do rozmiaru. policja. Jedną z najważniejszych części stylu czcionki jest jednak zdefiniowanie rodziny czcionek, czyli stylu używanego przez tekst na stronie internetowej.

Zdefiniuj rodzinę czcionek używaną przez tekst na stronie internetowej. strony internetowej, możesz użyć właściwości font-family. Składnia właściwości font-family jest następująca:

Właściwość font-family akceptuje pojedynczą czcionkę lub listę czcionek. Jeśli określisz więcej niż jeden znak, musisz oddzielić każdy znak przecinkiem.

Kolejność wyświetlania znaków to kolejność, w jakiej przeglądarka będzie próbowała je zastosować. Przeglądarka domyślnie użyje pierwszej czcionki na liście, która jest zainstalowana lub którą można pobrać z przeglądarki internetowej. Jeśli ten znak nie jest dostępny, zostanie użyty drugi znak i tak dalej.

Jest Należy zauważyć, że właściwość font-family wybierze czcionkę dla każdego znaku w bloku tekstu. Następnie, jeśli określony znak nie jest dostępny w czcionce, zostanie wypróbowana następna czcionka Twojej czcionki na liście rodziny, dopóki nie zostanie znaleziony odpowiedni znak.

W przypadku korzystania z font-weight jest to najlepiej podać co najmniej jedną czcionkę ogólną (na przykład szeryfową, bezszeryfową lub o stałej szerokości). Gwarantuje to, że jeśli inna czcionka na liście nie jest dostępna, przeglądarka nadal będzie mogła wybrać czcionkę tekstu na stronie internetowej do wyświetlenia.

Istnieją dwa sposoby użycia właściwość rodziny czcionek. Po pierwsze, możesz użyć tej właściwości, aby określić niestandardową czcionkę dla strony internetowej. Po drugie, możesz użyć tej właściwości, aby zastosować ogólną rodzinę czcionek do tekstu na stronie internetowej. Ogólne rodziny czcionek dostępne do użytku z właściwością font-family są następujące:

• szeryf: Czcionki używają czcionki szeryfowej (np. Lucida Bright, Palladio).
• sans-serif: Czcionki używają czcionki sans-serif (np. Open Sans, Trebuchet MS).
• monospace: wszystkie znaki mają tę samą szerokość (np. minivan, Menlo).
• kursywa: znaki mają myślnik (np. Lucida Calligraphy).
• fantasy: Dekoracyjne czcionki używane do przyciągnięcia uwagi do czcionek (np. Papyrus).

Istnieją dostępne są inne ogólne rodziny czcionek, które można przeczytać bardziej szczegółowo w Dokumentacja rodziny czcionek Mozilla CSS .

Teraz, gdy znamy już podstawy właściwości font-family, możemy przyjrzeć się kilku przykładom jej działania w akcji .

Przykłady rodzin czcionek CSS

Lokalny znaczek poprosił nas, klub Seattle Stamp Club, o dostosowanie czcionek do części na swojej stronie internetowej.

Przede wszystkim poproszono nas o zmianę czcionki we wszystkich nagłówkach

na ich stronie „Kontakty”, aby użyć „Otwórz Sans” czcionka. Na przykład w Open Sans powinna pojawić się strona „Skontaktuj się z nami” na stronie „Skontaktuj się z nami” w ich witrynie. Jeśli ta czcionka nie jest dostępna, należy użyć ogólnej rodziny „bezszeryfowej”. W tym celu możemy użyć następującego kodu:

Kliknij " noscript> przycisk w edytorze kodu powyżej, aby zobaczyć dane wyjściowe naszego kodu HTML / CSS .

W naszym kodzie HTML określiliśmy nagłówek za pomocą tagu

zawierającego tekst Skontaktuj się z nami . Tak więc w naszym kodzie CSS użyliśmy rodzina czcionek do ustawienia czcionki dla elementów

na naszej stronie internetowej.

Wartość, którą przypisaliśmy do właściwości font-family ustawia czcionkę dla wszystkich elementów

w Otwórz Sans i, jeśli ta czcionka nie jest dostępna, używana jest ogólna rodzina sans-serif. Aby to osiągnąć, określiliśmy dwa znaki oddzielone przecinkiem.

Teraz załóżmy, że chcemy również zastosować styl do wszystkich znaków

elementów strony Kontakty z klubu znaczków, aby użyć czcionki Times. Jeśli ta czcionka nie jest dostępna, należy użyć domyślnej czcionki szeryfowej. W tym celu możemy użyć następującego kodu:

Kliknij noscript> 24" w edytorze kodu powyżej, aby zobaczyć wynik naszego kodu HTML / CSS.

W naszym przykładzie zadeklarowaliśmy akapit tekstu za pomocą znacznika

. Następnie definiujemy rodzinę czcionek wszystkich znaczników

w naszym arkuszu stylów CSS, aby użyć Times i serif. Domyślnie przeglądarka spróbuje wyświetlić wszystkie tagi

w czcionce Times. Jeśli ta czcionka nie jest dostępna, serif używana jest czcionka.