Czcionki CSS

CSS atrybuty czcionki definiują rodzinę czcionek, rozmiar, wytłuszczenie, styl (np. kursywa) i deformację (np. małe litery).

Serię CSS czcionek

W CSS istnieją dwa różne typy nazw serii czcionek:

  • Ogólne serie czcionek - kombinacje systemów czcionek o podobnym wyglądzie (np. "Serif" lub "Monospace")
  • Specyficzne serie czcionek - konkretne serie czcionek (np. "Times" lub "Courier")

Oprócz różnych specyficznych serii czcionek, CSS definiuje 5 rodzajów ogólnych serii czcionek:

  • Czcionki Serif
  • Czcionki Sans-serif
  • Czcionki Monospace
  • Czcionki Cursive
  • Czcionki Fantasy

Jeśli chcesz dowiedzieć się więcej o seriach czcionek, przeczytaj Serię CSS czcionek。

Zdefiniowanie serii czcionek

Użycie Atrybut font-family Zdefiniowanie serii czcionek tekstu.

Użycie ogólnej serii czcionek

Jeśli chcesz, aby dokument używał sans-serif czcionki, ale nie obchodzi cię, która konkretnie czcionka będzie używana, oto odpowiednie oświadczenie:

body {font-family: sans-serif;}

h2 {font-size:2.5em;}

Agent użytkownika wybierze czcionkę z serii sans-serif (np. Helvetica) i zastosuje ją do elementu body. Dzięki dziedziczeniu, ta selekcja czcionki zostanie zastosowana do wszystkich elementów zawartych w elemencie body, chyba że zostanie nadpisana bardziej szczególnym selektorem.

Zdefiniowanie serii czcionek

Oprócz użycia ogólnych serii czcionek, możesz również ustawić bardziej szczegółowe czcionki za pomocą atrybutu font-family.

Poniższy przykład ustawia czcionkę Georgia dla wszystkich elementów h1:

h1 {font-family: Georgia;}

h2 {font-size:2.5em;}

Taka reguła może również wywołać inny problem, jeśli agent użytkownika nie ma zainstalowanej czcionki Georgia, może użyć domyślnej czcionki agenta do wyświetlania elementu h1.

Możemy rozwiązać ten problem, łącząc specyficzne nazwy czcionek z ogólnymi seriami czcionek:

h1 {font-family: Georgia,} serif;}

h2 {font-size:2.5em;}

Jeśli czytelnik nie zainstalował Georgia, ale zainstalował czcionkę Times (czcionka z serii serif), agent użytkownika może użyć Times dla elementu h1. Chociaż Times nie pasuje do Georgia w pełni, jest przynajmniej wystarczająco bliski.

Dlatego zalecamy, aby w każdej regule font-family dostarczyć ogólną serię czcionek. W ten sposób mamy zabezpieczenie, że jeśli agent użytkownika nie może dostarczyć specyficznej czcionki zgodnej z regułą, może wybrać kandydującą czcionkę。

Jeśli znasz bardzo dobrze czcionki, możesz również指定一系列类似的字体给给定的元素。为了做到这一点，需要将这些字体按照优先顺序排列，然后用逗号连接：

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

h2 {font-size:2.5em;}

Na podstawie tej listy agent użytkownika będzie szukał tych czcionek w podanym porządku. Jeśli wszystkie wymienione czcionki są niedostępne, zostanie wybrana dostępna czcionka serif.

Użycie cudzysłówów

Może zauważyłeś, że w powyższych przykładach użyto apostrofów. Cudzysłówów należy używać w deklaracji font-family, jeśli nazwa czcionki zawiera jedną lub więcej spacji (np. New York) lub jeśli nazwa czcionki zawiera znaki takie jak # lub $.

Można używać zarówno apostrofów jak i cudzysłów. Ale jeśli font-family umieszczony jest w atrybucie style HTML, należy użyć tego samego rodzaju cudzysłowów, którego nie używa atrybut:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,</p>
 'New York', serif;">...

h2 {font-size:2.5em;}

Styl czcionki

Atrybut font-styleNajczęściej używany do określenia tekstu nachylnego.

Atrybut ma trzy wartości:

  • normal - tekst wyświetlany normalnie
  • italic - tekst wyświetlany w stylu pobożnym
  • oblique - tekst wyświetlany nachylony

Kombinacja procentów i EM

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

h2 {font-size:2.5em;}

Różnica między italic a oblique

font-style bardzo prosty: używany do wyboru między normalnym tekstem, tekstem italic i tekstem nachylnym. Jedynie nieco skomplikowane jest dokładne określenie różnicy między tekstem italic a tekstem nachylnym.

Italic to prosty styl czcionki, który wprowadza niewielkie zmiany w strukturze każdej litery, aby odzwierciedlić zmieniony wygląd. W przeciwieństwie do tego, tekst nachylny (oblique) to nachylona wersja normalnego pionowego tekstu.

Zwykle italic i oblique tekst w przeglądarce internetowej wygląda zupełnie tak samo.

Zmiana czcionki

Atrybut font-variantMożna ustawić małe kapitale.

Małe kapitale to nie zwykłe duże litery ani małe litery, te litery mają różne rozmiary dużej litery.

Kombinacja procentów i EM

p {font-variant:small-caps;}

h2 {font-size:2.5em;}

Pogrubienie czcionki

Atrybut font-weightUstawianie grubości tekstu.

Użycie słowa kluczowego bold, aby ustawić tekst na pogrubiony.

Słowa kluczowe 100 ~ 900 określają 9 poziomów pogrubienia. Jeśli czcionka zawiera te poziomy pogrubienia, liczby te są bezpośrednio mapowane do zdefiniowanych poziomów, 100 odpowiada najcieńszej formie czcionki, 900 odpowiada najgrubszej formie czcionki. Liczba 400 jest równoważna normal, a 700 równoważna bold.

Jeśli ustawisz pogrubienie elementu na bolder, przeglądarka ustawi grubszą czcionkę niż wartość dziedziczona. W przeciwieństwie do tego, słowo lighter spowoduje, że浏览器将加粗度下移而不是上移。

Kombinacja procentów i EM

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

h2 {font-size:2.5em;}

Rozmiar czcionki

Atrybut font-sizeUstawianie rozmiaru tekstu.

Moc zarządzania rozmiarem tekstu jest ważna w dziedzinie projektowania stron internetowych. Jednak nie powinieneś zmieniać rozmiaru tekstu, aby akapit wyglądał jak tytuł, lub tytuł jak akapit.

Zawsze używaj poprawnych tagów HTML do tytułów, np. <h1> - <h6> do oznaczania tytułów, <p> do oznaczania akapitów.

Wartość font-size może być absolutna lub względna.

Wartość absolutna:

  • Ustawianie tekstu na określony rozmiar
  • Nie pozwól użytkownikom zmieniać rozmiaru tekstu we wszystkich przeglądarkach (to nie jest korzystne dla dostępności)
  • Absolutny rozmiar jest bardzo przydatny, gdy określa się fizyczny rozmiar wyjścia

Względny rozmiar:

  • Ustawianie rozmiaru w stosunku do otaczających elementów
  • Pozwolenie użytkownikom na zmianę rozmiaru tekstu w przeglądarce

Uwaga:Jeśli nie określiłeś rozmiaru czcionki, domyślny rozmiar normalnego tekstu (np. akapitu) wynosi 16 pikseli (16px=1em).

Używanie pikseli do ustawiania rozmiaru czcionki

Ustawianie rozmiaru tekstu za pomocą pikseli pozwala na pełną kontrolę nad rozmiarem tekstu:

Kombinacja procentów i EM

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

h2 {font-size:2.5em;}

W przeglądarkach Firefox, Chrome i Safari można ponownie dostosować rozmiar tekstu w podanych przykładach, ale nie jest to możliwe w przeglądarce Internet Explorer.

Choć można zmieniać rozmiar tekstu za pomocą narzędzia skalowania przeglądarki, jest to w rzeczywistości regulacja całej strony, a nie tylko tekstu.

Używanie jednostki em do ustawiania rozmiaru czcionki

Aby uniknąć problemów z nieuzupełnialnością tekstu w przeglądarce Internet Explorer, wielu deweloperów używa jednostki em zamiast pixels.

W3C 推荐使用 em 尺寸单位。

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

W3C zaleca użycie jednostki rozmiaru em.

1em równa się bieżącemu rozmiarowi czcionki. Jeśli element ma font-size równy 16 pikseli, to dla tego elementu 1em równa się 16 pikseli. Przy ustawianiu rozmiaru czcionki, wartość em zmienia się względem rozmiaru czcionki rodzica./16=Przeglądarki domyślnie ustawiają rozmiar tekstu na 16 pikseli. Dlatego 1em ma domyślny rozmiar 16 pikseli.pixels

Można użyć poniższego wzoru do konwersji pikseli na em:/16=(Uwaga: 16 równa się domyślnemu rozmiarowi czcionki rodzica, zakładając, że rozmiar czcionki rodzica wynosi 20px, to formuła musi zostać zmieniona na:pixels/20=

Kombinacja procentów i EM

em
)
h1 {font-size:3.75em;} /* 60px/16=3.75em */

h2 {font-size:2.5em;}

h2 {font-size:2.5em;} /* 40px/16=2.5em */

p {font-size:0.875em;} /* 14px/16=0.875em */

W powyższym przykładzie, rozmiar tekstu wyrażony w em jest taki sam jak w poprzednim przykładzie wyrażonym w pikselach. Jednakże, jeśli używasz jednostki em, możesz dostosować rozmiar tekstu we wszystkich przeglądarkach.

Niestety, w IE wciąż występują problemy. Przy resetowaniu rozmiaru tekstu, tekst będzie większy lub mniejszy niż normalny.

Kombinacja procentów i EM

Rozwiązanie, które działa we wszystkich przeglądarkach, to ustawienie wartości domyślnej font-size w elemencie body (rodzic) w procentach:
Przykład
body {font-size:100%;}
h1 {font-size:3.75em;}

h2 {font-size:2.5em;}

p {font-size:0.875em;}

Spróbuj sam

Naszy kod jest bardzo efektywny. W wszystkich przeglądarkach można wyświetlić ten sam rozmiar tekstu i umożliwić skalowanie rozmiaru tekstu przez wszystkie przeglądarki.
CSS przykład czcionki:
Ustawienie czcionki tekstu
Ten przykład pokazuje, jak ustawić czcionkę tekstu.
Ustawienie rozmiaru czcionki
Ten przykład pokazuje, jak ustawić rozmiar czcionki.
Ustawienie stylu czcionki
Ten przykład pokazuje, jak ustawić styl czcionki.
Ustawienie grubości czcionki
Ten przykład pokazuje, jak ustawić grubość czcionki.
Wszystkie właściwości czcionki w jednym deklaracji
Ten przykład pokazuje, jak używać krótkich właściwości do ustawienia właściwości czcionki w jednym deklaracji.

CSS właściwości czcionki

Właściwości Opis
font Kratkie właściwości. Działanie polega na ustawieniu wszystkich właściwości czcionki w jednym deklaracji.
font-family Ustawianie serii czcionek.
font-size Ustawianie rozmiaru czcionki.
font-size-adjust Inteligentne skalowanie czcionki zastępczej, gdy czcionka preferowana jest niedostępna. (W CSS2.1 usunięto ten atrybut.)
font-stretch Poziome rozciąganie czcionki. (W CSS2.1 usunięto ten atrybut.)
font-style Ustawianie stylu czcionki.
font-variant Wyświetlanie tekstu w małych wielkich literach lub normalnych literach.
font-weight Ustawianie grubości czcionki.