Przejdź do treści

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

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)

Przeglądarki


Chrome
Firefox
Edge
Opera
Safari
font-variant-ligatures: wartość34
2014-04-08		34
2014-12-01		79
2020-01-15		21
2014-05-06		9.1
2016-03-21
font-variant-ligatures: common-ligatures31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
font-variant-ligatures: contextual31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
font-variant-ligatures: discretionary-ligatures31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
font-variant-ligatures: historical-ligatures31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
font-variant-ligatures: no-common-ligatures31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
font-variant-ligatures: no-contextual31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
font-variant-ligatures: no-discretionary-ligatures31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
font-variant-ligatures: no-historical-ligatures31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
font-variant-ligatures: none31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
font-variant-ligatures: normal31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22

Komentarze

Zobacz więcej komentarzy

Facebook