Właściwości czcionek CSS definiuje rodzinę czcionek, śmiałość, rozmiar i styl tekstu.
Różnica między Serif i Sans-serif Fonts
Rodziny CSS czcionki
W CSS, istnieją dwa rodzaje nazw rodzin czcionek:
- generic rodzina - grupa rodzin czcionek o podobnym wyglądzie (jak "Serif" lub "monospace")
- font family - rodzina konkretnej czcionki (jak "Times New Roman" lub "Arial")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana |
"Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console |
All monospace characters have the same width |
 | Uwaga: W monitorach komputerowych, czcionki sans-serif są uważane za łatwiejsze do odczytania niż serif czcionek. |
|---|
Rodzina czcionek
Rodzina czcionki tekstu jest ustawiony z font-family nieruchomości.
font-family nieruchomość powinna posiadać kilka nazw czcionek jako system "awaryjnej". Jeśli przeglądarka nie obsługuje pierwszą czcionkę, próbuje następny czcionki i tak dalej.
Start z żądaną czcionkę, a kończy z ogólnej rodziny, aby przeglądarka wybrać podobną czcionkę w rodzinie generycznego, jeśli nie ma innych czcionek są dostępne.
Uwaga: Jeśli nazwa rodziny fontów jest więcej niż jedno słowo, to musi być w cudzysłowie, jak: "Times New Roman".
Więcej niż jedna rodzina czcionek jest określony w postaci listy oddzielonych przecinkami:
Do najczęściej używanych kombinacji czcionek, spojrzeć na naszej sieci Sejf Kombinacje czcionek .
Styl czcionki
font-style nieruchomość jest najczęściej używany do określenia tekstu kursywą.
Ta właściwość ma trzy wartości:
- normalny - Tekst jest wyświetlany normalnie
- kursywa - tekst jest pokazany kursywą
- ukośne - Tekst jest "pochylony" (ukośne jest bardzo podobna do kursywa, ale mniej obsługiwane)
Przykład
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
} Spróbuj sam " Rozmiar czcionki
font-size właściwość określa wielkość tekstu.
Będąc w stanie zarządzać rozmiar tekstu jest ważne w tworzeniu stron internetowych. Jednak nie należy stosować korekty rozmiar czcionki, aby akapity wyglądać pozycjami lub nagłówki wyglądać ust.
Zawsze należy stosować odpowiednie znaczniki HTML, takich jak <h1> - <h6> nagłówki i <p> Do ust.
Wartość font-size może być absolutna lub względna wielkość.
Absolutna wielkość:
- Ustawia tekst do określonego rozmiaru
- Nie pozwala użytkownikowi zmienić rozmiar tekstu we wszystkich przeglądarkach (złe powodów dostępności)
- Absolutna wielkość jest przydatna, gdy fizyczna wielkość produkcji jest znany
wielkość względna:
- Ustawia rozmiar w stosunku do otaczających elementów
- Pozwala użytkownikowi na zmianę rozmiaru tekstu w przeglądarkach
| Uwaga: Jeśli nie zostanie określony rozmiar czcionki, rozmiar domyślny dla normalnego tekstu, jak ustępach, jest 16px (16px = 1 em). |
|---|
Ustaw rozmiar czcionki z pikseli
Ustawianie rozmiaru tekstu z pikseli daje pełną kontrolę nad rozmiarem tekstu:
Wskazówka: Jeśli używasz pikseli, można nadal korzystać z funkcji powiększenia rozmiaru całej strony.
Ustaw rozmiar czcionki z Em
Aby umożliwić użytkownikom zmianę rozmiaru tekstu (w menu przeglądarki), wiele osób używa em zamiast pikseli.
Urządzenie wielkości em jest zalecane przez W3C.
1em wynosi aktualnego rozmiaru czcionki. Domyślny rozmiar tekstu w przeglądarkach jest 16px. Tak więc, domyślny rozmiar 1em jest 16px.
Wielkość można obliczyć z pikseli em za pomocą tego wzoru:pikseli/ 16 =em
Przykład
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
} Spróbuj sam " W powyższym przykładzie, wielkość artykułu EM jest taka sama, jak w poprzednim przykładzie, w pikselach. Jednak wraz z wielkością em, jest możliwe, aby dostosować rozmiar tekstu we wszystkich przeglądarkach.
Niestety, wciąż istnieje problem ze starszymi wersjami IE. Tekst jest większy niż powinna przy wykonane jako większe i mniejsze niż powinna przy mniejsza.
Użyj kombinacji procent i Em
Rozwiązanie, które działa we wszystkich przeglądarkach, jest ustawić domyślny rozmiar czcionki w procentach dla elementu <body>:
Przykład
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
} Spróbuj sam " Nasz kod teraz działa świetnie! To pokazuje ten sam rozmiar tekstu we wszystkich przeglądarkach, a także umożliwia wszystkie przeglądarki, aby powiększyć lub zmienić wielkość tekstu!
Waga czcionki
font-weight właściwość określa wagę czcionki:
Wariant czcionki
font-variant właściwość określa, czy dany tekst powinien być wyświetlany w czcionce small-caps.
W czcionki small-caps, wszystkie małe litery są zamieniane na duże litery. Jednak skonwertowane wielkie litery pojawia się w mniejszym rozmiarze czcionki niż oryginalny wielkich liter w tekście.
Więcej przykładów
Wszystkie właściwości czcionki w jednej deklaracji
Ten przykład pokazuje, jak używać skróconą własnością dla ustawienia wszystkich właściwości czcionki w jednej deklaracji.
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »
Wszystkie właściwości CSS czcionki
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |