Jak ustawić granicę czcionki w CSS
Dzięki CSS możesz stylizować czcionki na kilka sposobów. Na przykład możemy ustawić granicę dla czcionki, aby była bardziej atrakcyjna w odniesieniu do jej wyglądu. Obramowanie czcionki jest również dodawane, gdy jest wymagana do nakreślenia tekstu. Pozwala również na stylizowanie tekstu i dodawanie koloru i szerokości zgodnie z Twoimi preferencjami.
W tym przewodniku dowiemy się o ustawieniu granicy czcionki w CSS.
Jak ustawić granicę czcionki w CSS?
W CSS możemy użyć następujących właściwości do ustawienia granicy czcionki:
- -właściwość Webkit-Tekst-Srakt
- właściwość tekstu tekstowego
Więc zacznijmy.
Metoda 1: Użyj-WWEBKIT-TEXT STRUK WŁAŚCIWOŚĆ CSS, aby ustawić granicę czcionki
Właściwość w strukturze tekstu jest specjalnie wprowadzona do ustawienia granicy na czcionki. Jednak nieruchomość nie jest zawarta w standardach W3C. Dlatego słowo kluczowe ”-Webkit”Jest do niego dodawany, aby wykonać określoną funkcjonalność. -Webkit-text-proporty działa na Safari, Google Chrome i przeglądarce Firefox.
Sprawdź poniższy przykład, aby dowiedzieć się więcej o ustawieniu granicy czcionki za pomocą właściwości -webkit-text-stroke.
Przykład
Oto tekst, dla którego chcemy ustawić granicę:
W naszym pliku HTML dodaliśmy tekst jako nagłówek za pomocą „ Html Najlepsza strona internetowa edukacyjna Aby ustawić granicę wokół czcionki, użyjemy CSS ”-Webkit-Text-Stroke„Własność z”1px„Granica i daj”czerwony" kolor. Określymy również kolor tekstu jako niebieski, używając „kolor" nieruchomość: CSS Teraz zapiszemy kod i otworzymy plik HTML w przeglądarce: Można zauważyć, że granica czcionki została z powodzeniem zastosowana za pomocą właściwości-WWEBKIT-STRUKA, a dodany tekst wygląda stylowo. Metoda 2: Użyj właściwości tekstowej, aby ustawić granicę czcionki "cień tekstu„Własność sama jest terminem samorozprawie, ponieważ jest używana do dodawania cieni w tekstach. Można jednak manipulować, aby skutecznie ustawić granicę czcionki. Zastosujmy więc tę właściwość CSS na tym samym tekście, aby ustawić granicę wokół niej. Przykład Tutaj sprawimy, że czerwony cień wyskakuje ”1px”Z każdej strony za pomocą właściwości tekstowej„-1px 0px 0px”Określa lewe boki cień,„1px 0px 0px”Określi cień po prawej stronie,„0px -1px 0px”Określi cień górnej strony i„0px 11px 0px”Określa cień dolnej strony: CSS Wyjście Zebraliśmy różne podejścia do ustawiania granic czcionek w CSS. Wniosek Aby ustawić granicę czcionki w CSS, „-Webkit-Text-Stroke„Własność i„ „cień tekstu„Własność można użyć do dodania granicy czcionki w określony sposób. Strokowanie tekstowe nie jest zawarte w standardach W3C; Można go jednak wykorzystać ze słowem kluczowym -webkit. Ten zapis wyjaśnił dwie metody, które mogą pomóc w ustawianiu granic czcionek w CSS. H2
-WebKit-Text-Stroke: 1px Red;
kolor niebieski;H2
cień tekstu:
-1px 0px 0px czerwony,
1px 0px 0px czerwony,
0px -1px 0px czerwony,
0px 1px 0px czerwony; kolor: niebieski;