Inne działy

 

 

Ustawienie czcionki za pomocą CSS

Ten poradnik nauczy Cię, jak ustawić czcionki w treści elementów dostępnych w HTML. Można ustawić właściwości czcionki elementu następująco:

  • Właściwość font-family  jest używana do zmiany rodziny czcionki.
  • Właściwość font-style  jest używana, aby zastosować do czcionki kursywę lub pochylenie
  • Właściwość font-variant jest używana do tworzenia efektu kapitalików (mała czcionka).
  • Właściwość font-weight  jest używana, aby zwiększyć lub zmniejszyć pogrubienie czcionki.
  • Właściwość font-size  jest używana, aby zwiększyć lub zmniejszyć rozmiar czcionki
  • Właściwość font  jest używana, jako skrót, aby określić liczbę innych właściwości czcionki.

Ustawienie rodziny czcionek:

Oto przykład, który pokazuje, jak ustawić rodzinę czcionek. Możliwe wartości to dowolna nazwa rodziny czcionek.

 

<p style="font-family:georgia,garamond,serif;">
Ten tekst jest wyświetlany, jako georgia, garamond, lub domyślną czcionką szeryfowa, w zależności od czcionki, którą masz w systemie.
</p>

 

 Poniżej wynik działania kodu:

Ten tekst jest wyświetlany, jako georgia, garamond, lub domyślną czcionką szeryfowa, w zależności od czcionki, którą masz w systemie.

 

 Ustawienie stylu czcionki:

Oto przykład, który pokazuje, jak ustawić styl czcionki dla elementu. Możliwe wartości to: normal, italic (kursywa) i oblique (ukośne).

<p style="font-style:italic;">
Ten tekst zostanie wyświetlony, jako kursywa 
</p>

 

 Poniżej wynik działania kodu:

Ten tekst zostanie wyświetlony, jako kursywa

 

 Ustawienie właściwości font-variant (kapitaliki)

Oto przykład, który pokazuje, jak ustawić właściwość font-variant. Możliwe wartości to normal i small-caps (kapitaliki).

<p style="font-variant:small-caps;">
Ten tekst zostanie wyświetlony, jako kapitaliki 
</p>

 

 Poniżej wynik działania kodu:

Ten tekst zostanie wyświetlony, jako kapitaliki

 

 Ustawienie grubość czcionki (font-weight):

Oto przykład, który pokazuje, jak określić grubość czcionki elementu. Własność font-weight zapewnia funkcjonalność, aby określić, jakie ma być pogrubienie czcionki. Możliwe wartości to, normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

<p style="font-weight:bold;">
Ta czcionka jest pogrubiona.
</p>
<p style="font-weight:bolder;">
Ta czcionka jest bardziej pogrubiona.
</p>
<p style="font-weight:900;">
Ta czcionka ma wartość 900.
</p>

 

 Poniżej wynik działania kodu:

Ta czcionka jest pogrubiona.

Ta czcionka jest bardziej pogrubiona.

Ta czcionka ma wartość 900

 

Ustawienie rozmiaru czcionki (font-size):

Oto przykład, który pokazuje, jak ustawić wielkość czcionki elementu. Własność font-size jest używana do kontrolowania rozmiaru czcionki. Możliwe wartości to xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, rozmiar w pikselach lub w %.

<p style="font-size:20px;">
Jest to rozmiar czcionki 20 pixels
</p>
<p style="font-size:small;">
Ten rozmiar czcionki jest mały 
</p>
<p style="font-size:large;">
Ten rozmiar czcionki jest duży 
</p>

 

 Poniżej wynik działania kodu:

Jest to rozmiar czcionki 20 pixels

Ten rozmiar czcionki jest mały

Ten rozmiar czcionki jest duży

 

 Zastosowanie font-size

Oto przykład, który pokazuje, jak ustawić rozmiar czcionki dostosowany do elementu. Ta właściwość pozwala dostosować wysokość x, aby czcionki były bardziej czytelne. Możliwa wartość może być dowolną liczbą.

<p style="font-size-adjust:0.61;">
Ten tekst ma zastosowany styl font-size-adjust.
</p>

 

 Poniżej wynik działania kodu:

Ten tekst ma zastosowany styl font-size-adjust.

 

 Właściwość font-stretch:

Oto przykład, który pokazuje, jak ustawić właściwość czcionki font-stretch elementu. Właściwość ta powoduje zastosowanie normalnego lub poszerzonego lub zwężonego kroju czcionki.

Możliwe wartości mogą być normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.

<p style="font-stretch:ultra-expanded;">
Jeśli to nie wydaje się działać, to jest prawdopodobne, że twój komputer nie nie ma możliwości zastosowania tej właściwości.
</p>

 

 Poniżej wynik działania kodu:

Jeśli to nie wydaje się działać, to jest prawdopodobne, że twój komputer nie nie ma możliwości zastosowania tej właściwości.

 

 Wersja skrócona własności:

Własność font umożliwia ustawienie wszystkich właściwości czcionki na raz. Na przykład:

 

<p style="font:italic small-caps bold 15px georgia;">
Stosowanie wszystkich właściwości tekstu na raz.
</p>

 

 Poniżej wynik działania kodu:

Stosowanie wszystkich właściwości tekstu na raz.

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.