Najnowsze tutoriale tworzenie stron internetowych
 

CSS Czcionki


Właściwości czcionek CSS definiuje rodzinę czcionek, śmiałość, rozmiar i styl tekstu.


Różnica między Serif i Sans-serif Fonts

Serif serif vs.

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
UwagaUwaga: 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:

Przykład

p {
    font-family: "Times New Roman", Times, serif;
}
Spróbuj sam "

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
UwagaUwaga: 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:

Przykład

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}
Spróbuj sam "

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:

Przykład

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}
Spróbuj sam "

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.

Przykład

p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}
Spróbuj sam "

Przykłady

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