Odległość między znakami czcionki {font-kerning}
W jaki sposób regulować odległość pomiędzy sąsiednimi znakami tekstu (kerning) tak, aby wyglądał bardziej estetycznie i był czytelniejszy?
CSS 3
selektor { font-kerning: tryb }Natomiast jako "tryb" należy wpisać:
- auto - przeglądarka sama zdecyduje, jaki tryb zastosować (domyślnie) - np. aby poprawić czytelność, może wyłączyć kerning dla małego tekstu
- normal - wymuszenie kerningu
- none - zablokowanie kerningu
Aby tekst wyglądał estetycznie, odległości między wszystkimi sąsiadującymi znakami powinny być podobne. Kształt niektórych par liter powoduje jednak, że kiedy występują obok siebie, stwarzają wrażenie, jakby odstęp pomiędzy nimi był większy niż w rzeczywistości. Typowym przykładem mogą być np. wielkie litery: A V. Ponieważ ich kształt jest komplementarny - odwrócone względem siebie kontury trójkąta - odstęp pomiędzy nimi wydaje się być wyjątkowo duży. W pewnych przypadkach czytelnik mógłby nawet uznać, że wchodzą w skład osobnych wyrazów w tekście.
Kerning to sposób na regulowanie odległości pomiędzy konkretnymi parami znaków w tekście. Dzięki niemu pusta przestrzeń pomiędzy sąsiadującymi znakami wygląda tak samo, chociaż fizycznie odległość między nimi nie musi być taka sama. Zwykle zdanie się tutaj na domyślne działanie przeglądarki jest najlepszym rozwiązaniem. Jednak czasami dla niektórych rodzajów i wielkości czcionek znaki w tekście mogą wydawać się dziwnie nierówno od siebie oddalone albo nieczytelne. Dlatego jeśli domyślny sposób wyświetlania tekstu nas nie satysfakcjonuje, pomocne może być wymuszenie albo zablokowanie kerningu.
font-kerning w odróżnieniu od letter-spacing nie dodaje jednakowego odstępu pomiędzy literami tekstu, ale dopasowuje go w zależności od tego, jakie znaki ze sobą sąsiadują.
Przykład {font-kerning}
Zwróć uwagę, że w pierwszym przypadku poniżej (bez kerningu) pusta przestrzeń pomiędzy literami "AV" powinna wydawać się większa - jeżeli byśmy narysowali linię łączącą prawy-dolny wierzchołek litery "A" z lewym-górnym wierzchołkiem litery "V", to byłaby ona mniej więcej pionowa, podczas gdy w drugim przypadku (z kerningiem) litery te wyraźnie na siebie zachodzą:
Zauważ, że przy zablokowanym kerningu (pierwszy przypadek powyżej) wydaje się, jakby litery "AV" były położone dalej od siebie niż kolejne litery "VX". Tak ułożony tekst z pewnością trudniej się czyta i wygląda mniej estetycznie.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | Poziom wsparcia min. 2,5 roku | |
|---|---|---|---|---|---|---|
font-kerning: wartość | 33 2014-02-20 | 32 2014-09-02 | 79 2020-01-15 | 20 2014-03-04 | 9 2015-09-30 |
Komentarze
Bianca_201115.09.2021 19:39
super! :P
Fajnie to działa :lol:
Zobacz więcej- Błąd
01.07.2016 23:37
Znalazłem błąd:
„Natomiast w trybie zgodności ze standardami: xx-small = 10px, x-small = 10px, small = 12px, medium = 16px, large = 18px, x-large = 24px, xx-large = 32px (w tym przypadku wszystkie wartości są o jeden rozmiar mniejsze niż w trybie Quirks).”
Sprawdziłem rozmiary i w...
Zobacz więcej 
Comandeer02.02.2015 00:12
Nie bardzo rozumiem w czym problem… 2 czcionki to po prostu 2 polecenia @font-face
Zobacz więcej- niewazne
02.02.2015 00:00
jak zwykle "wszystko inne pomiędzy tematem" to takie moje wrażenie...autor napisał ad. osadzenia czcionki w css @font-face... a 2 czcionki osadzić to już nie wiadomo?
Zobacz więcej - Luke
22.07.2014 09:13
Comandeer: "w sumie dziwię się, że taką opcję dano devom…".
Oczywiście też mnie to denerwuje, jednak są aspekty, w których taka blokada ma zastosowanie - np. gry przeglądarkowe - i niestety nic poza tym mi nie przychodzi do głowy. :P
Zobacz więcej - Comandeer
21.07.2014 21:54
kurshtml: "Na marginesie: apeluję, nie blokujcie skalowania strony na przeglądarkach mobilnych tylko dlatego, że wydaje się, że skoro zrobiliście specjalną wersję RWD, to użytkownik nie będzie potrzebował używać funkcji skalowania.".
osobiście bojkotuję takie strony. to chyba najbardziej...
Zobacz więcej 
Sławomir Kokłowski21.07.2014 21:50
Sęk w tym, że prawie żaden użytkownik nie wie, gdzie przestawić domyślny rozmiar tekstu, jeśli ten, który określiła za niego przeglądarka, nie jest dla niego wygodny. W takim przypadku po prostu używa wbudowanego w przeglądarkę mechanizmu skalowania strony, a nie szuka opcji po ustawieniach.
Na...
Zobacz więcej- Comandeer
21.07.2014 21:46
kurshtml: "No właśnie nie wiem, co to szkodzi, żeby chociaż dla body ustawić "font-size: 16px"?".
nic nie szkodzi - wyszedłem z błędnego założenia, że taka faktycznie jest bazowa wielkość. mea culpa ;) ALE :D zgodnie ze specyfikacją CSS 2.1
http://www.w3.org/TR/CSS21/fonts.html#font...
Zobacz więcej - Sławomir Kokłowski
21.07.2014 21:37
No właśnie nie wiem, co to szkodzi, żeby chociaż dla body ustawić "font-size: 16px"? Argument, że lepiej zostawić przeglądarce możliwość określenia najlepszego rozmiaru bazowego fontu, jest nietrafiony - co opisałem. Poza tym skalowanie strony przeglądarki rozwiązały w inny sposób...
Zobacz więcej - Comandeer
21.07.2014 21:27
kurshtml: "To konkretny przykład którejś z wersji przeglądarki Opera pod Linuksa".
to raczej wyjątek. chociaż faktycznie, nie jestem w stanie znaleźć w specyfikacji odpowiedniego określenia. niemniej praktycznie wszystkie ustawiają to domyślnie na 16px. w ostateczności byłoby to jedyne px...
Zobacz więcej
