Przejdź do treści

CSS / Czcionki

Wariant połączenia znaków czcionki {font-variant-ligatures}

W jaki sposób sprawić, aby niektóre litery w tekście były ze sobą bardziej zlane tworząc estetyczne połączenie graficzne (ligatury)?

(CSS 3 - interpretuje Firefox 34, Opera 21, Chrome 34)

selektor { font-variant-ligatures: warianty }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "warianty" należy podać konkretne ustawienia ligatur, czyli połączeń pomiędzy niektórymi sąsiadującymi literami tekstu. Możliwe są tutaj trzy sposoby:
  1. normal - domyślne ustawienia
  2. none - zablokowanie ligatur, dzięki czemu możemy np. nieco przyspieszyć wyświetlanie tekstu na ekranie
  3. Dowolna liczba poniższych wartości rozdzielonych spacjami:
    • common-ligatures albo no-common-ligatures - włącza lub wyłącza standardowe ligatury
    • discretionary-ligatures albo no-discretionary-ligatures - włącza lub wyłącza ligatury specyficzne dla określonej czcionki
    • historical-ligatures albo no-historical-ligatures - włącza lub wyłącza historyczne ligatury, które występowały np. w zabytkowych, ręcznie kaligrafowanych książkach
    • contextual albo no-contextual - włącza lub wyłącza kontekstowe ligatury, dzięki którym kształt znaków może się nieco zmienić w zależności z jakimi literami sąsiadują

    Możliwe jest łączenie powyższych wariantów - np.: "font-variant-ligatures: no-common-ligatures discretionary-ligatures contextual".

Ligatura to połączenie dwóch lub więcej sąsiadujących liter w jeden znak graficzny. Przykładowo jeśli w tekście będą występować obok siebie podwójne litery "ff" albo kombinacja liter "fi", mogą zostać zlane w pojedynczy symbol w taki sposób, że nie pojawi się między nimi żaden odstęp.

Niestety nie każda czcionka udostępnia ligatury. Często dostępny może być jedynie wariant discretionary-ligatures, a dla czcionek bezszeryfowych - nawet żaden.

Przykład {font-variant-ligatures}

Na poniższej liście powinno być widać różnicę wyświetlania przynajmniej dla discretionary-ligatures - zwróć uwagę, na połączone (bardziej ze sobą zlane) litery "ffi":

ffi (font-variant-ligatures: normal)
ffi (font-variant-ligatures: none)
ffi (font-variant-ligatures: common-ligatures)
ffi (font-variant-ligatures: no-common-ligatures)
ffi (font-variant-ligatures: discretionary-ligatures)
ffi (font-variant-ligatures: no-discretionary-ligatures)
ffi (font-variant-ligatures: historical-ligatures)
ffi (font-variant-ligatures: no-historical-ligatures)
ffi (font-variant-ligatures: contextual)
ffi (font-variant-ligatures: no-contextual)

Komentarze

Zobacz więcej komentarzy

Facebook