Czcionka i tekst

Czcionka i tekst
css3
rk
Stylistyka czcionek - proporcja
font-size-adjust
Ta sama czcionka bardzo często ma różne wymiary w różnych systemach.
h1{ font-size: 25px; font-weight: normal}
h1#jeden {font-family:Verdena;}
h1#dwa {font-family: ”Times New Roman” , Times. serif; }
h1#trzy { font-family: ”Times New Roman” , Times. serif;
font-size-adjust: 0.54 }
< h1 id=”jeden”>Nagłówek jeden Verdena 25px.<h1>
< h1 id=”dwa”>Nagłówek dwa Times New Roman 25px.<h1>
< h1 id=”dwa”>Nagłówek dwa Times New Roman 25px z dodaną proporcją <h1>
Niestety nie wszyskie przeglądarki.
Nagłówki 1 i 3 powinny mieć zbliżoną wielkość zaś nagłówek 2
mniejszy pomimo jednakowej wielkości.
Stylistyka tekstu
nowe = stare
Wyrównanie w poziomie
text-align
start = left
end = right
div {
text-align:start;
height: 30px;
width: 300px;
border: 1px solid black;
direction: rtl;
}
<div> nie dotyczy to europejczyków
Dynamiczne przypisanie
wyrównania
Pionowe wyrównanie
auto - automatyczne
vertical_-align
central - wyśrodkowanie
use-script – zależnie od działania skryptu
Łamanie długich wyrazów
word-wrap oraz break-word
normal - domyślnie
p { width: 200px; border: 1px solid black; font-size: 12px;}
p#jeden {word-wrap: normal;}
p#dwa {word-wrap: break-word;}
<p id=”jeden”> długie słowo
aaaaaaaaaaaaaaabbbbbbbbbbbbbbb</p>
<p id=”dwa”> długie słowo
aaaaaaaaaaaaaaabbbbbbbbbbbbbbb</p>
długie słowo aaaaaaaaaaaaaaabbbbbbbbbbb
długie słowo aaaaaaaaaaaaaaa
bbbbbbbbbbbbbbb
Zbyt długi tekst
text-overflow
Ale - aby działało?
- ustawić overflow na hidden;
- sztywna szerokość;
- white-space musi mieć wartość nowrap lub pre;
p {
width: 200px;
border: 1px solid black;
overflow: hidden;
white-space: nowrap:
clip – domyślny, tekst ucięty
ellipsis - otrzymamy
wielokropek przed końcem
kontenera
ellipsis-word - otrzymamy
wielokropek przed końcem
kontenera po ostatnim wyrazie
/nie do końca działa/
}
p:hover {overflow: visible; }
p#jeden {text-overflow: clip;}
poza kontenerem –słowo_uci
p#dwa {text-overflow: ellipsis;}
<p id=”jeden”> poza kontenerem -słowo ucięte</p>
<p id=”dwa”> wielokropek przed końcem
poza kontenerem –słowo_u ...
kontenera</p>
cień
text-shadow
np. text-shadow : 4px 4px 6px red
Przesunięcie cienia
w poziomie
Przesunięcie cienia
w pionie
Rozmycie
h1 {
Font: normal 35px ”Czcinka”
Color: #555;
text-shadow : 4px 4px 6px rgba ( 120, 120, 120, .6);
}
<h1> Efek cieniowania -charakter trójwymiarowości </h1>
Dwa ostre cienie – oddziel przecinkami
text-shadow : 1px 1px 1px #333 , -1px -1px 1 px # 333;
Tło obrazkowe a tekst , aż się prosi
body {bacground: url(obrazek.jpg); font-size:20px; color: #FFF;}
p {text-shadow: 1px 1px 1px rgba(0,0,0,0.7);}
<p> tekst na obrazie </p>
Kolor
Przełamanie wiersza
word-break
word-break: normal ; bez podziału wyrazu
word-break: hyphenate ; przełamanie na łączniku
word-break: break-all ; przełamanie w dowolnym miejscu
p { width: 150px; border: 1px solid black; font-size: 12px;}
p#jeden {word-break: normal; }
p#dwa {word-break: hyphenate; }
p#trzy {word-break: break-all; }
<p id=”jeden”> Ten akapit zastanie załamany w dowolnym miejscu, żaden wyraz nie
zostanie podzielony </p>
<p id=”dwa”> Ten akapit zastanie załamany nie w dowolnym miejscu, lecz na łączniku.
</p>
<p id=”trzy”> Ten akapit zastanie załamany w dowolnym miejscu.</p>
Obrys tekstu
Nie wchodząca w specyfikację CSS3
text-stroke-width – szerokość konturu
text-stroke-color – kolor konturu
Kontur w skrócie
h1 {
-webkit-text-stroke: #555 2px;
font-size: 20 px;
font-family: ”Trebuchet MS”;
Color: #666;
}
<h1> tekst z obrysem
text-fill-color – kolor wypełnienia
h1 {-webkit-text-fill-color- red; }
webkit – wspierany silnik
KOLUMNY TEKSTU