Chinczyk 216 Opublikowano 29 Czerwca 2013 Udostępnij Opublikowano 29 Czerwca 2013 Wielkość selektor { font-size: rozmiar } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli . Natomiast jako "rozmiar" należy podać konkretną wielkość czcionki. Możliwe są tutaj cztery sposoby: Imienne wartości absolutne:xx-small - najmniejszax-small - mniejsza small - mała medium - średnia large - duża x-large - większa xx-large - największa UWAGA! W Internet Explorerze 6 i 7.0 wielkość czcionki, podana przez powyższe wartości, zależy od zadeklarowanej wersji DTD. W trybie Quirks wielkości są następujące (w przypadku ustawienia w menu przeglądarki średniego rozmiaru tekstu): xx-small = 10px (10 pikseli), x-small = 12px, small = 16px, medium = 18px, large = 24px, x-large = 32px, xx-large = 48px. 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). W Internet Explorerze 5.0 wielkość czcionki nie zależy od DTD i wynosi zawsze tyle, co w przypadku trybu Quirks. Z powyższych powodów bezpieczniej jest podawać wszystkie wielkości czcionek w pikselach (np.: 14px). Niestety wtedy uniemożliwiamy użytkownikowi zmianę rozmiaru tekstu, poprzez wybranie polecenia z menu: Widok/Rozmiar tekstu, dotyczy to jednak właściwie tylko bardzo przestarzałych przeglądarek - jak np. MSIE 6.0. Przykład: rozmiar xx-small rozmiar x-small rozmiar small rozmiar medium rozmiar large rozmiar x-large rozmiar xx-large [*]Wartości względne: smaller - mniejsza od bieżącejlarger - większa od bieżącej Czcionka bieżąca to taka, której wielkość została określona w arkuszu stylów (importowanym, zewnętrznym lub wewnętrznym) albo poprzez styl lokalny. Jeśli czcionka bieżąca nie została określona, najczęściej przyjmuje domyślną wielkość 16px. Przykład: rozmiar smaller czcionka bieżąca rozmiar larger [*]Jednostki długości Jednostka "em" jest w tym przypadku miarą względną i odnosi się do rozmiaru czcionki zdefiniowanej dla elementu rodzica, czyli: 1em = 100%. Przykład: rozmiar 0.5cm rozmiar 4mm rozmiar 0.25in rozmiar 10pt rozmiar 1pc rozmiar 15px rozmiar 1em rozmiar 2ex [*]Procent wielkości bieżącej: Przykład: rozmiar 75% Czcionka bieżąca rozmiar 150% Jeśli definiowane własności mają odnosić się do całej strony (np. wielkość czcionki na całej stronie), można użyć selektora BODY albo HTML. Najlepszy sposób ustalania wielkości czcionki Jak widać, rozmiar tekstu można definiować przy pomocy wielu jednostek, jednak wcale nie jest wszystko jedno, w jaki sposób to zrobimy. em Kiedyś panowała opinia, że najlepszą jednostką do ustalania rozmiaru czcionki jest "em" i rzeczywiście tak mogłoby się wydawać, ponieważ jednostka ta jest bezpośrednio związana z czcionką - oznacza po prostu rozmiar dużej litery. Dodatkowo w czasach, gdy na rynku królowała przeglądarka MSIE 6.0, taki sposób zapewniał użytkownikom możliwość skalowania rozmiaru tekstu. Dzisiaj wszystkie popularne przeglądarki (MSIE od wersji 7.0) nie mają już z tym żadnych problemów. Innym powodem stosowania tej jednostki mogła być chęć polepszenia czytelności witryny w urządzeniach mobilnych, które posiadają zwykle niewielki ekran. W takim przypadku jednak i tak pozostała cześć stylizacji dokumentu najczęściej nie nadaje się do wyświetlenia na ekranie np. telefonu komórkowego. Znacznie lepszym pomysłem jest przygotowanie osobnego arkusza CSS, przeznaczonego specjalnie dla medium handheld. Używanie "em" posiada natomiast bardzo poważną wadę. Pamiętajmy, że "1em" to tyle samo co "100%", a więc jest obliczane zawsze względem jakiejś wartości bazowej, wyrażonej w pikselach. Gdy samodzielnie jej nie wpiszemy w naszym arkuszu stylów - a nie możemy, ponieważ wtedy utracilibyśmy wszystkie wyżej wymienione zalety - przeglądarka przyjmie swój domyślny rozmiar czcionki. W większości przypadków domyślną wartością jest "16px", ale nie ma na to żadnej gwarancji. Niesie do ze sobą poważne trudności: Nie da sie zapanować nad ułożeniem na stronie elementów graficznych, które z zasady posiadają rozmiary pikselowe. Czytelność tekstu zależy nie tylko od jego rozmiaru, ale również m.in. od proporcji, a więc rodzaju czcionki. Dlatego tak samo jak kolor tekstu zawsze powinno ustalać się wspólnie z kolorem tła, definiując rodzaj czcionki trzeba podać również jej rozmiar. Może się zdarzyć, że domyślnie ustawiona w przeglądarce czcionka ma bardzo duże proporcje, a więc będzie zupełnie czytelna przy rozmiarze "13px", podczas gdy najczęściej domyślnie stosowana w systemie Windows 'Times New Roman' jest czytelna dopiero przy ok. "16px". Jeśli teraz ustalimy na stronie czcionkę bezszeryfową, może okazać się, że "16px" to dla niej za dużo, ponieważ zwykle ma większe proporcje. Dlatego podajemy np. "font-size: 0.75em", co daje: 0.75 * 16px = 12px, podczas gdy dla domyślnego rozmiaru "13px" będzie to: 0.75 * 13px = 9.75px, co najczęściej oznacza miniaturowy tekst, bardzo trudny do odczytania. Na ekranie monitora wszystkie elementy są wyświetlane zawsze przy użyciu pikseli, a więc każda jednostka ostatecznie i tak musi być w ten sposób przeliczona. Jak można było zauważyć na wcześniejszym przykładzie obliczeń, korzystając z jednostek takich jak "em" (lub "%"), może się okazać, że przeliczona wartość pikselowa nie jest liczbą całkowitą. Jak wiadomo, nie da się podzielić piksela ekranowego, a więc wartość ta musi być zaokrąglona. Nie ma jednak żadnej pewności, w jaki sposób zostanie to wykonane: w dół, w górę, czy zgodnie z zasadami matematyki, a czasem nawet jeden piksel różnicy może być granicą dobrej czytelności tekstu. W przeglądarce, która była główną przyczyną rozpowszechnienia się koncepcji ustalania wielkości czcionki przy użyciu jednostek "em" (MSIE 6.0), w pewnych przypadkach występował błąd, objawiający się wyświetlaniem miniaturowego tekstu dla wszystkich wartości poniżej "1em" - nie ważne, że po przeliczeniu na piksele, wynikowy rozmiar wypadał np. 15px, co powinno zagwarantować dobrą czytelność. Nie używaj jednostek "em" ani "%" do ustalania wielkości czcionek. px Piksele są nierozerwalnie związane z ekranem monitora. Dlatego jednostka ta jest idealnym wyborem przy ustalaniu wielkości czcionki w podstawowym arkuszu CSS. Problemy ze skalowaniem tekstu, którego rozmiar został podany w pikselach, dzisiaj należą już do rzadkości - aktualne wersje wszystkich popularnych przeglądarek bez problemu sobie z tym radzą. Nie ma sensu na siłę szukać innego sposobu wymiarowania czcionek, ponieważ i tak nie uciekniemy od tego, że wszystkie ilustracje osadzone na stronie mają rozmiary pikselowe. Teoretycznie można narzucić im wymiary przy użyciu jednostek "em", ale może to wywołać konieczność ich przeskalowania przez przeglądarkę, co zawsze skutkuje utratą jakości zdjęcia - nawet przy pomniejszaniu. Wartości pikselowe zupełnie nie nadają się do ustalania czcionki w arkuszu dla wydruku. pt Jednostka "pt" (punkty) miała być dobrym kompromisem między trudnymi do przewidzenia konsekwencjami używania "em" a sztywnym blokowaniem rozmiaru za pomocą "px". Jeśli z komputera korzysta osoba słabowidząca lub po prostu posiadająca monitor z niewielkim ekranem, może zwiększyć podstawowy rozmiar czcionki w całym systemie operacyjnym, zmieniając tzw. wartość dpi, czyli liczbę pikseli przypadająca na jeden cal długości. Okazuje się jednak, że wiele osób w ogóle nie jest świadoma takiej możliwości. Przy tym przeglądarki często mają problem z prawidłowym wyznaczeniem ustawionej wartości dpi. Ponadto, jak to zwykle bywa z wartościami domyślnymi, nie da się w żaden sposób przewidzieć, co zostało ustawione w systemie użytkownika czytającego naszą stronę, a tutaj standardowe ustawienia różnych systemów operacyjnych mocno się różnią - wiele osób nawet nie wie jak to przestawić. Nie używaj jednostki "pt" do ustalania rozmiaru czcionki na ekranie. Większość edytorów tekstu podaje jednak rozmiary w punktach, a nie w pikselach. Drukarka zawsze zna dokładne wymiary arkusza papieru, a więc może zapewnić prawidłowy wydruk tekstu. "pt" jest zatem idealną jednostką w arkuszach CSS stylizujących formatowanie tekstu na wydruku. Podsumowanie Ustalając wielkość czcionki: nigdy nie używaj jednostek "em" ani "%" dla czcionek w domyślnym arkuszu CSS zawsze korzystaj z "px" w arkuszu CSS dla wydruku posługuj się jednostką "pt" Rodzaj selektor { font-family: rodzaj, rodzaj1, rodzaj2,... } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli. Natomiast jako "rodzaj, rodzaj1, rodzaj2,..." należy podać rodzaje czcionek. Podanie kilku rodzajów spowoduje, że jeśli użytkownik nie będzie posiadał pierwszego, to zostanie wybrany następny w kolejności (można oczywiście podać tylko jeden rodzaj). Jeżeli nazwa czcionki składa się z kilku wyrazów, należy ją objąć w znaki apostrofu (np. 'Times New Roman', 'Courier New'). Polecenie pozwala wybrać konkretny krój czcionki. UWAGA! Należy być ostrożnym z używaniem tego polecenia, ponieważ jeśli użytkownik oglądający Twoją stronę, nie będzie posiadał podanej czcionki w swoim systemie operacyjnym, tekst zostanie napisany czcionką domyślną (w Internet Explorerze będzie to najprawdopodobniej 'Times New Roman', chociaż to też nie jest pewne). Poza tym nie każda czcionka potrafi zapisać poprawnie polskie znaki (w standardzie ISO). Koniecznie sprawdź rezultat w praktyce! Korzystniej jest wypisać kilka rodzajów - wtedy zostanie użyta taka czcionka, którą pierwszą w kolejności podawania będzie posiadał użytkownik. W systemie Windows standardowo dostępne powinny być czcionki: 'Times New Roman' (szeryfowa), Arial (bezszeryfowa), 'Courier New' (monotypiczna). Dodatkowo od jakiegoś czasu z Internet Explorerem dostarczane są: Verdana, Tahoma, 'Trebuchet MS', Georgia. Przy definiowaniu czcionki, dobrze jest wykorzystywać te właśnie rodzaje, a także takie które domyślnie występują w innych systemach operacyjnych (np. Helvetica - podobna do Arial). Rodziny ogólne Oprócz podania rodzaju czcionki wprost, możliwe jest także wpisanie rodziny ogólnej: serif - czcionka szeryfowa (końcówki znaków posiadają "ozdobniki"), np.: 'Times New Roman', Georgia, Garamond, Bodoni sans-serif - czcionka bezszeryfowa (końcówki znaków są proste), np.: Arial, Verdana, 'Trebuchet MS', Helvetica, Univers, Futura monospace - czcionka o stałej szerokości znaków - monotypiczna (wygląda, jak pisana na maszynie), np.: Courier, 'Courier New' cursive - czcionka mająca pewne cechy pochyłej (wygląda, jak pisana ręcznie) fantasy - czcionka fantazyjna (dekoracyjna) Taki sposób jest mocno zalecany, gdyż wtedy nawet jeśli użytkownik nie będzie posiadał żadnej z podanych czcionek, strona zostanie wyświetlona przy użyciu czcionki podobnej do zdefiniowanych, a nie domyślnej, która może zupełnie nie pasować do typografii naszej strony. Dlatego zawsze staraj się na końcu wpisywać rodzinę ogólną, do której należą czcionki, podane w pierwszej kolejności (najczęściej wykorzystuje się rodziny: serif lub sans-serif). Niestety, ponieważ w takim przypadku to przeglądarka automatycznie dobiera rodzaj czcionki, może się zdarzyć, że wybierze czcionkę, która niepoprawnie zapisuje polskie znaki (tak się właśnie stało w mojej przeglądarce z rodziną fantasy). Chociaż jeśli chodzi o rodziny podstawowe (serif, sans-serif, monospace), wszystko powinno być w porządku. Przykład: To jest czcionka Arial To jest czcionka 'Courier New' To jest czcionka 'Times New Roman' To jest czcionka Verdana To jest rodzina ogólna serif To jest rodzina ogólna sans-serif To jest rodzina ogólna monospace To jest rodzina ogólna cursive To jest rodzina ogólna fantasy Czcionki osadzone Na koniec ostatnia (najbardziej zaawansowana) możliwość ustalania kroju czcionki - czcionki osadzone. Jak czytelnik zapewne zauważył, ustalenie rodzaju czcionki, wcale nie jest takie proste. O czcionce przy użyciu której zostanie wyświetlona nasza strona WWW, decyduje zestaw "fontów" zainstalowanych przez użytkownika (w jego systemie operacyjnym). Praktycznie nie można przewidzieć rezultatu, gdyż na dobrą sprawę nie wiemy, jaki system posiada internauta odwiedzający nasz serwis. Używanie podstawowych rodzajów czcionek ('Times New Roman', Arial, 'Courier New', Helvetica), nie zawsze musi nam odpowiadać, a poza tym nie gwarantuje oczekiwanego rezultatu w stu procentach. Okazuje się jednak, że istnieje sposób, pozwalający używać na stronie WWW dowolne czcionki, bez obawy o niepoprawne wyświetlanie. Możliwe jest umieszczenie na serwerze specjalnego pliku z czcionkami, z którego korzysta przeglądarka, podczas wyświetlania strony. Nawet jeśli użytkownik nie będzie posiadał wymaganego kroju, zostanie on automatycznie pobrany z Internetu i dynamicznie tymczasowo zainstalowany w jego systemie. Użytkownik nie będzie mógł z takiej czcionki korzystać po wyjściu z serwisu - chroni to prawa autorskie producentów czcionek. Osadzanie czcionki bezpośrednio na stronie, odbywa się w arkuszu stylów (wewnętrznym lub zewnętrznym): Zaznacz kod Wypróbuj kod /* */ Ten tekst jest napisany czcionką osadzoną "comic". Ten akapit używa czcionki osadzonej "comic". Jako adres URL można podać także ścieżkę dostępu do pliku czcionki, wyznaczaną względem arkusza CSS, a nie dokumentu HTML, w którym ten arkusz został dołączony. Opcjonalnie zaleca się podać również format pliku czcionki, aby przeglądarka nie pobierała fontu, którego nie potrafi wyświetlić ani żeby nie musiała się domyślać formatu na podstawie rozszerzenia nazwy pliku: Zaznacz kod Wypróbuj kod @font-face { font-family: comic; src: url(http://adres/plik.ttf) format("truetype"); } Formaty czcionek Format Opis Rozszerzenie "truedoc-pfr" TrueDoc™ Portable Font Resource *.pfr "embedded-opentype" Embedded OpenType *.eot "type-1" PostScript™ Type 1 *.pfb, *.pfa "truetype" TrueType *.ttf "opentype" OpenType, włącznie z TrueType Open *.ttf "truetype-gx" TrueType z rozszerzeniem GX "speedo" Speedo "intellifont" Intellifont Źródło: Cascading Style Sheets, Level 2 Może się zdarzyć, że użytkownik będzie posiadał zainstalowaną niestandardową czcionkę w swoim systemie operacyjnym. Nie ma sensu wtedy pobierać jej z serwera. Jednak na podstawie samej nazwy pliku czy nazwy, jaką przypisaliśmy czcionce osadzonej, nie da się stwierdzić, jak naprawdę nazywa się ta czcionka. Dlatego konieczne jest jawne wpisanie jej nazwy (zwracam uwagę, że jest to pełna nazwa czcionki, a nie nazwa pliku, dlatego obowiązkowo trzeba ją ująć w cudzysłowy lub apostrofy!): Zaznacz kod Wypróbuj kod @font-face { font-family: comic; src: local("Comic Font Regular"), url(http://adres/plik.ttf) format("truetype"); } MSIE 8 nie potrafi osadzić zewnętrznej czcionki w formacie *.ttf. Przeglądarki takie jak: Firefox 3, Opera 10, Chrome 4 czy Safari bez problemu radzą sobie z wczytywaniem fontów wprost z plików *.ttf. Niestety Internet Explorer (od wersji 6 do 8) nie potrafi tego robić. Microsoft wprowadził za to własny format czcionek osadzonych - Embedded OpenType (pliki *.eot). Za pomocą specjalnego programu - WEFT można skonwertować do tego formatu czcionki, które są odpowiednio wyprodukowane i nie posiadają zakazu ich publikacji. Istnieją również inne konwertery formatu TTF -> EOT. Aby zatem osadzić na stronie niestandardową czcionkę, która będzie widoczna również dla Internet Explorera, trzeba się posłużyć następującym kodem: Zaznacz kod Wypróbuj kod @font-face { font-family: comic; src: url(http://adres/plik.eot); src: local("Comic Font Regular"), url(http://adres/plik.ttf) format("truetype"); } Większość fontów jest licencjonowana, tzn. zwykle nie można legalnie osadzić ich na swojej stronie internetowej, nawet jeśli były wcześniej zainstalowane na Twoim komputerze. Istnieją jednak serwisy WWW, gdzie można za darmo pobrać całą masę czcionek - nawet do użytku komercyjnego. Takim serwisem jest np. Font Squirrel - udostępnia on nie tylko pokaźny zbiór bezpłatnych czcionek, ale nawet gotowe paczki z wersjami tych samych fontów w formacie *.eot. Pamiętaj jednak, że używanie czcionek osadzonych wymaga pobrania dodatkowego pliku przez przeglądarkę, co trochę wydłuży czas wczytywania strony. Poza tym nie wszyscy użytkownicy lubią czytać tekst napisany fantazyjnymi, niestandardowymi fontami. Dlatego stosuj tę metodę rozsądnie. Google Web Fonts (interpretuje Internet Explorer 6.0, Firefox 3.5, Opera 10.5, Chrome 4.2/Safari 3.5) Google Web Fonts to darmowa platforma, udostępniająca katalog czcionek ze szczególnym przeznaczeniem do osadzania na stronach internetowych. Co ważne, wszystkie fonty można używać całkowicie bezpłatnie - nawet na stronach komercyjnych. Można je również pobrać na swój dysk i samodzielnie zmodyfikować (np. dodając brakujące znaki) albo użyć w innym projekcie, niekoniecznie związanym ze stronami WWW. Aby skorzystać z dowolnej czcionki, dostępnej w katalogu Google Web Fonts, nie trzeba nawet umieszczać na swoim serwerze żadnych plików. Mogą być one pobierane wprost z serwerów Google. Dzięki temu, jeżeli nasz czytelnik wcześniej odwiedzi inny serwis, w którym również była osadzona taka sama czcionka jak na naszej stronie, plik nie będzie musiał być pobierany ponownie, ponieważ będzie już zapisany w pamięci podręcznej przeglądarki użytkownika. Oczywiście osoby, które obawiają się, że Google kiedyś zaprzestanie udostępniania darmowych czcionek, mogą skopiować sobie pliki na własny serwer ;-) [*] /* */ Jeżeli nazwa rodzaju czcionki zawiera spację, w adresie arkusza musi być ona zastąpiona znakiem plusa. Natomiast już wewnętrznym arkuszu CSS wstawiamy normalnie znak spacji. Oczywiście jako wartość atrybutu font-family powinny zostać podane po przecinku standardowo dostępne w systemach operacyjnych rodzaje czcionek, a na samym końcu nazwa rodziny ogólnej - podobne wyglądem do czcionki osadzonej. Dzięki temu, jeżeli przeglądarka użytkownika nie będzie obsługiwała mechanizmu osadzania czcionek, tekst wyświetli się innym, najbardziej zbliżonym krojem pisma. Google udostępnia specjalne narzędzie do podglądu czcionek. Dzięki niemu można szybko wybrać czcionkę, ustawić jej wymagane atrybuty i od razu skopiować kod HTML gotowy do osadzenia na swojej stronie. Nie każda czcionka z katalogu zawiera wszystkie polskie znaki diakrytyczne. Co prawda w takim przypadku większość przeglądarek wyświetli brakujące litery standardową czcionką (tylko MSIE 6.0 w ogóle nie potrafi wyświetlić brakujących znaków!), ale i tak nie wygląda to estetycznie. Dlatego zawsze dobrze jest sprawdzić rezultat przed wprowadzenie strony do Internetu. Wersja czcionki Czcionki mogą być udostępniane w kilku wersjach: regular Domyślnie bold b Wytłuszczenie (pismo pogrubione) italic i Kursywa (pismo pochylone) bolditalic bi Jednocześnie kursywa i wytłuszczenie Aby osadzić czcionkę w wybranej wersji - innej niż domyślna - nazwę lub skrót nazwy wersji należy wpisać w adresie arkusza CSS, doklejając ją do nazwy czcionki po znaku dwukropka. Jeżeli w jednym dokumencie (X)HTML korzystamy z kilku wersji tej samej czcionki, nazwy lub skróty nazw wersji wyliczamy po przecinku, np.: Zaznacz kod Wypróbuj kod Zwracam uwagę, że "bold,italic" nie jest tym samym co "bolditalic". W pierwszym przypadku możemy używać czcionki pogrubionej albo pochylonej do różnych tekstów, ale jeśli jeden tekst ma być napisany jednocześnie pismem pogrubionym i pochylonym, musimy skorzystać z drugiego przypadku. Nie należy jednak dołączać wszystkich możliwych wersji czcionki na zapas, ponieważ wydłuży to wczytywanie strony. Alfabet Niektóre czcionki potrafią wyświetlić pismo składające się z liter różnych alfabetów: latin Alfabet łaciński (m.in. język polski) cyrillic Cyrylica (m.in. język rosyjski) greek Alfabet grecki khmer Język khmerski (Kambodża, Wietnam i Tajlandia) Zaznacz kod Wypróbuj kod < head > < link rel="Stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=rodzaj&subset=alfabet" /> Jeżeli na jednej stronie chcemy używać kilku alfabetów tej samej czcionki, nazwy alfabetów wymieniamy po znaku przecinka. Lista czcionek Jeżeli w jednym dokumencie (X)HTML chcemy skorzystać z kilku różnych rodzajów czcionek osadzonych, możemy oczywiście dołączyć kilka arkuszy CSS. Nie jest to jednak najlepsze rozwiązanie, ponieważ wydłuża czas potrzebny na załadowanie strony za pierwszym razem. Zwykle korzystniej wstawić tylko jeden arkusz, a w adresie podać po znaku o znaku "pipe" ("|") nazwy wszystkich potrzebnych czcionek (z ewentualnymi nazwami wersji - nie ma natomiast możliwości określenia osobnego alfabetu dla każdej czcionki), np.: Zaznacz kod Wypróbuj kod Nie należy dołączać wszystkich możliwych rodzajów czcionek na zapas, ponieważ wydłuży to wczytywanie strony. Jeżeli na jednej stronie używamy tylko pierwszego rodzaju czcionki, a na innej tylko drugiego, zwykle lepiej jest na każdej z nich dołączyć oddzielny arkusz. Być może użytkownik nigdy nie odwiedzi drugiej strony i wtedy plik drugiej czcionki nigdy nie będzie musiał być pobrany do pamięci podręcznej jego przeglądarki. Nawet jeśli czytelnik odwiedzi obie strony, pobieranie rozłoży się na raty, co również najczęściej będzie korzystniejsze. Styl selektor { font-style: styl } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli. Natomiast jako "styl" należy wpisać: normal - czcionka normalna (podstawowa)italic - czcionka pochylona (jeżeli niedostępna, automatycznie wybierany jest styl oblique) oblique - również czcionka pochylona (podobna jak poprzednio) Polecenie pozwala nadać czcionce określony styl. Może to być: czcionka zwyczajna, pochylona lub pochylona drugiego rodzaju. Dwie ostatnie są wyświetlane bardzo podobnie. Różnica między nimi polega na tym, że czcionka italic faktycznie jest osobnym krojem, natomiast oblique może zostać wygenerowana przez pochylenie zwykłej czcionki. Przykład: styl normal styl italic styl oblique Waga selektor { font-weight: waga } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli. Natomiast jako "waga" należy wpisać: Wartości absolutne: Niektóre rodziny czcionek mogą nie posiadać wszystkich dziewięciu stopni wytłuszczenia. Wiele posiada tylko wartości "normal" i "bold". Przykład: waga normal (400) waga bold (700) waga 100 waga 200 waga 300 waga 400 (normal) waga 500 waga 600 waga 700 (bold) waga 800 waga 900normal - czcionka normalna (podstawowa)bold - czcionka pogrubiona 100, 200, 300, 400 (odpowiednik "normal"), 500, 600, 700 (odpowiednik "bold"), 800, 900 - każdy następny numer wskazuje wagę czcionki przynajmniej tak samo wytłuszczonej jak dla poprzedniej wartości w sekwencji [*]Wartości względne: Przykład: waga lighter w stosunku do wartości "200" waga lighter dla znacznika ... waga bolder w stosunku do wartości "800" waga bolder dla znacznika ... lighter - czcionka mniej wytłuszczona od odziedziczonej lub przypisanej do znacznika (np. typowo znaczniki ... oraz ... mają przypisaną domyślną wagę "bold")bolder - czcionka bardziej wytłuszczona Wariant selektor { font-variant: wariant } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli. Natomiast jako "wariant" należy wpisać: normal - czcionka normalna (podstawowa) small-caps - kapitaliki Polecenie pozwala wybrać wariant czcionki jako "kapitaliki", czyli tekst napisany wielkimi literami, lecz czcionką o wielkości małych liter. Przykład: Wariant normal Wariant small-caps Rozciągnięcie selektor { font-stretch: rozciąg } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli. Natomiast jako "rozciąg" należy wpisać: ultra-condensed - najbardziej ścieśniona extra-condensed condensed - ścieśniona semi-condensed normal - czcionka normalna (podstawowa) semi-expanded expanded - rozciągnięta extra-expanded ultra-expanded - najbardziej rozciągnięta Polecenie pozwala ustalić poziome rozciągnięcie czcionki na ekranie. Tekst rozciągnięty będzie zajmował więcej miejsca w linii, natomiast ściśnięty - mniej. UWAGA! Polecenie wchodzi w skład CSS 2.0, ale nie CSS 2.1 Przykład: rozciągnięcie ultra-condensed rozciągnięcie extra-condensed rozciągnięcie condensed rozciągnięcie semi-condensed rozciągnięcie normal rozciągnięcie semi-expanded rozciągnięcie expanded rozciągnięcie extra-expanded rozciągnięcie ultra-expanded Niestety przeglądarki nie interpretują tego polecenia, więc prawdopodobnie nie zauważysz żadnego efektu. zrodlo : http://www.kurshtml.edu.pl/ Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Brelok 305 Opublikowano 29 Czerwca 2013 Udostępnij Opublikowano 29 Czerwca 2013 Hej! Nie widzisz zawartości tego postu? Zaloguj się lub Zarejestruj nowe konto, aby korzystać ze wszystkich dostępnych funkcji! Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
DeoN 0 Opublikowano 1 Lipca 2013 Udostępnij Opublikowano 1 Lipca 2013 Hej! Nie widzisz zawartości tego postu? Zaloguj się lub Zarejestruj nowe konto, aby korzystać ze wszystkich dostępnych funkcji! Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
FreeMan 0 Opublikowano 4 Sierpnia 2013 Udostępnij Opublikowano 4 Sierpnia 2013 Hej! Nie widzisz zawartości tego postu? Zaloguj się lub Zarejestruj nowe konto, aby korzystać ze wszystkich dostępnych funkcji! Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Rekomendowane odpowiedzi