Mam poziome menu nawigacyjne, które jest w zasadzie tylko <ul>
z elementami ustawionymi obok siebie. Nie definiuję szerokości, ale po prostu używam dopełnienia, ponieważ chciałbym, aby szerokości były definiowane przez szerokość pozycji menu. Pogrubię aktualnie wybrany element.
Problem w tym, że w pogrubieniu słowo staje się nieco szersze, co powoduje, że pozostałe elementy przesuwają się nieznacznie w lewo lub w prawo. Czy istnieje sprytny sposób, aby temu zapobiec? Coś w rodzaju nakazania wyściółce ignorowania dodatkowej szerokości spowodowanej pogrubieniem? Moją pierwszą myślą było po prostu odjęcie kilku pikseli od wypełnienia elementu „aktywnego”, ale ta ilość jest różna.
Jeśli to możliwe, chciałbym uniknąć ustawiania statycznej szerokości dla każdego wpisu, a następnie wyśrodkowywania, w przeciwieństwie do rozwiązania wypełniania, które mam obecnie, aby ułatwić przyszłe zmiany wpisów.
Odpowiedzi:
Miałem ten sam problem, ale uzyskałem podobny efekt przy niewielkim kompromisie, zamiast tego użyłem text-shadow.
Oto działający przykład:
przykład jsfiddle
źródło
li:hover {text-shadow: 1px 0 0 black;}
spowodowało, że tekst ze zbyt małymi odstępami między literami. Aby jeszcze raz to poprawić, ustawiliśmyli {letter-spacing: 1px;}
-0.5px 0 #fff, 0.5px 0 #fff
, ponieważ widzieliśmy małą lukę między samym tekstem a cieniem. A także pogrubiony tekst dodaje wagi po obu stronach.Najlepsze działające rozwiązanie wykorzystujące :: after
HTML
CSS
Dodaje niewidoczny pseudoelement z szerokością pogrubionego tekstu, którego źródłem jest
title
atrybut.text-shadow
Rozwiązanie wygląda nienaturalnie na Mac i nie wykorzystuje całe piękno, które renderowania tekstu na Mac ofert .. :)http://jsfiddle.net/85LbG/
Kredyt: https://stackoverflow.com/a/20249560/5061744
źródło
margin-top
do::after
bloku rozwiązało ten problem.Najbardziej przenośnym i przyjemnym wizualnie rozwiązaniem byłoby użycie
text-shadow
. To zmienia i pokazuje przykłady odpowiedzi Thorgeira przy użyciu poprawek Alexxali i moich własnych:Powoduje to umieszczenie małych „cieni” w kolorze czarnym (w
black
razie potrzeby użyj nazwy / kodu koloru czcionki ) po obu stronach każdej litery przy użyciu jednostek, które będą odpowiednio skalowane podczas renderowania czcionki.Sam zobacz:
Najedź na renderowane linie, aby zobaczyć, czym różnią się od standardowego tekstu.
Zmień poziom powiększenia przeglądarki ( Ctrl+ +i Ctrl+ -), aby zobaczyć, jak się różnią.
Dodałem tutaj dwa inne rozwiązania dla porównania: sztuczka @ cgTag dotycząca odstępów między literami , która nie działa tak dobrze, ponieważ polega na zgadywaniu zakresów szerokości czcionek, oraz @ workaholic_gangster911's :: po rysowaniu sztuczki , która pozostawia niezręczną dodatkową przestrzeń, dzięki czemu pogrubiony tekst może się rozszerzyć bez szturchania sąsiednich elementów tekstowych (atrybucję umieszczam po pogrubionym tekście, abyś mógł zobaczyć, jak się nie porusza).
W przyszłości będziemy mieć więcej czcionek zmiennych umożliwiających zmianę oceny czcionki za pomocą
font-variation-settings
. Obsługa przeglądarek rośnie (Chrome 63+, Firefox 62+), ale nadal wymaga to czegoś więcej niż tylko standardowych czcionek i obsługuje je tylko kilka istniejących czcionek.Jeśli osadzisz czcionkę zmienną, będziesz mógł używać CSS w następujący sposób:
W przewodniku Mozilla Variable Fonts Guide znajduje się demonstracja na żywo z suwakiem do gry z różnymi stopniami. Wprowadzenie Google do czcionek zmiennych w Internecie zawiera animowany plik GIF przedstawiający przełączanie między wysoką oceną a brakiem oceny:
źródło
Zauważyłem, że większość czcionek ma ten sam rozmiar, gdy dostosujesz odstępy między literami o 1 piksel.
Chociaż powoduje to zmianę zwykłej czcionki, dzięki czemu każda litera ma dodatkowe odstępy między pikselami. W przypadku menu tytuły są tak krótkie, że nie stanowi to problemu.
źródło
0.98px
lub mniejszych ułamków.1px
wartości względne, takie jak0.025ex
lub0.0125ex
. Zobacz moją odpowiedź na demonstrację na żywo.Aby uzyskać bardziej aktualną odpowiedź, możesz użyć
-webkit-text-stroke-width
:Pozwala to uniknąć wszelkich pseudoelementów (co jest plusem dla czytników ekranu) i cieni tekstu (które wyglądają niechlujnie i nadal mogą powodować lekki efekt „skoku”) lub ustawiania jakichkolwiek stałych szerokości (co może być niepraktyczne).
Pozwala również ustawić element jako odważniejszy niż 1px (teoretycznie możesz ustawić czcionkę tak odważną, jak chcesz, a także może być tandetnym treningiem do tworzenia odważnej wersji czcionki, która nie ma pogrubienia wariant, jak czcionki niestandardowe ( edycja: czcionki zmienne osłabiają tę sugestię ). Należy tego unikać, ponieważ prawdopodobnie spowoduje to, że niektóre czcionki będą wyglądały na szorstkie i postrzępione)
I to na pewno działa w Edge, Firefox, Chrome i Opera (w momencie publikacji) oraz w Safari ( edytuj: @Lars Blumberg dzięki za potwierdzenie ). NIE działa w IE11 lub starszym.
Zauważ również, że używa
-webkit
przedrostka, więc nie jest to standardowe i wsparcie może zostać usunięte w przyszłości, więc nie polegaj na tym, że jest to bardzo ważne - najlepiej unikać tej techniki, chyba że jest tylko estetyczna.źródło
Niestety jedynym sposobem uniknięcia zmiany szerokości, gdy tekst jest pogrubiony, jest zdefiniowanie szerokości elementu listy, jednak, jak powiedziałeś, zrobienie tego ręcznie jest czasochłonne i nie jest skalowalne.
Jedyne, o czym przychodzi mi do głowy, to użycie javascript, który oblicza szerokość karty, zanim zostanie pogrubiona, a następnie zastosuje szerokość w tym samym czasie, gdy pogrubienie jest wymagane (po najechaniu kursorem lub kliknięciu).
źródło
Użyj JavaScript, aby ustawić stałą szerokość li w oparciu o nie pogrubioną treść, a następnie pogrub zawartość, stosując styl do
<a>
tagu (lub dodaj rozpiętość, jeśli<li>
nie ma żadnych dzieci).źródło
To bardzo stare pytanie, ale wracam do niego, ponieważ miałem ten problem w aplikacji, którą tworzę, i znalazłem wszystkie potrzebne odpowiedzi.
(Pomiń ten akapit w przypadku TL; DR ...)Używam czcionki internetowej Gotham z cloud.typography.com i mam przyciski, które zaczynają się puste (z białą obwódką / tekstem i przezroczystym tłem) i uzyskują kolor tła po najechaniu kursorem. Zauważyłem, że niektóre kolory tła, których używałem, nie kontrastowały dobrze z białym tekstem, więc chciałem zmienić tekst na czarny dla tych przycisków, ale - czy to z powodu wizualnej sztuczki, czy zwykłych metod wygładzania - ciemny tekst na jasnym tle zawsze wydaje się być lżejszy niż biały tekst na ciemnym tle. Zauważyłem, że zwiększenie wagi z 400 do 500 dla ciemnego tekstu zachowało prawie dokładnie tę samą „wizualną” wagę. Zwiększyło to jednak nieznacznie szerokość przycisku - ułamek piksela - ale wystarczyło, aby przyciski wydawały się lekko „drżeć”, czego chciałem się pozbyć.
Rozwiązanie:
Oczywiście jest to naprawdę drobny problem, więc wymagał wyrafinowanego rozwiązania. Ostatecznie użyłem negatywu
letter-spacing
na odważniejszym tekście, jak zalecono powyżej cgTag, ale 1px byłby znacznie przesadzony, więc po prostu obliczyłem dokładnie potrzebną szerokość.Po sprawdzeniu przycisku w devtools Chrome stwierdziłem, że domyślna szerokość mojego przycisku wynosiła 165,47px, a 165,69px po najechaniu kursorem, czyli różnica 0,22px. Przycisk miał 9 znaków, więc:
0,22 / 9 = 0,024444px
Konwertując to na jednostki em, mogłem zmienić rozmiar czcionki na agnostyczny. Mój przycisk miał rozmiar czcionki 16px, więc:
0,024444 / 16 = 0,001527em
Więc dla mojej konkretnej czcionki poniższy kod CSS utrzymuje przyciski dokładnie tej samej szerokości po najechaniu kursorem:
Po krótkim przetestowaniu i zastosowaniu powyższego wzoru możesz znaleźć dokładnie odpowiednią
letter-spacing
wartość dla swojej sytuacji i powinna działać niezależnie od rozmiaru czcionki.Jedynym zastrzeżeniem jest to, że różne przeglądarki używają nieco innych obliczeń subpikseli, więc jeśli dążysz do tego poziomu OCD doskonałej precyzji subpikseli, musisz powtórzyć testy i ustawić inną wartość dla każdej przeglądarki. Style CSS ukierunkowane na przeglądarkę są generalnie źle widziane , nie bez powodu, ale myślę, że jest to jeden przypadek użycia, w którym jest to jedyna sensowna opcja.
źródło
Interesujące pytanie. Przypuszczam, że używasz float, prawda?
Cóż, nie znam żadnej techniki, której możesz użyć, aby pozbyć się powiększania tej czcionki, dlatego spróbują zmieścić się w wymaganej minimalnej szerokości - a zmiana grubości czcionki zmieni tę wartość.
Unikalne rozwiązanie, które znam, aby uniknąć tej zmiany, to takie, o którym powiedziałeś, że nie chcesz: ustawienie stałych rozmiarów na li.
źródło
Możesz to zaimplementować jak na amazon.com menu „Kupuj według działu”. Używa szerokiego div. Możesz stworzyć szeroki div i ukryć jego prawą część
źródło
AKTUALIZACJA: Musiałem użyć tagu B w tytule, ponieważ w IE11 pseudo klasa i: after nie była wyświetlana, gdy miałem widoczność: ukryta.
W moim przypadku chcę wyrównać (zaprojektowane na zamówienie) pole wyboru / radio z tekstem etykiety, gdzie tekst jest pogrubiony po sprawdzeniu danych wejściowych.
Przedstawione tutaj rozwiązanie nie działało u mnie w Chrome. Pionowe wyrównanie wejścia i etykiety zostało pomieszane z klasą: after psuedo i -margins nie naprawiły tego.
Oto poprawka pozwalająca uniknąć problemów z wyrównaniem w pionie.
źródło