Powrót

tekst na stronie

Większość przeglądarek ma obecnie ustawioną wielkość bazową czcionki na 16px.

 

Jednostki tekstu:

  • %

w elemencie body określamy wielkość bazowa -> font-size:100% – czyli 16px.

tekst definiujemy p:font-size:87.5% co daje 14px.

Jeśli w elemencie body zdefiniujemy czcionkę jako 62.5% ułatwimy sobie obliczenia – np. 120% da wielkość 12px.

 

  • em

wyliczana na podstawie czcionki elementu nadrzędnego. Body – font-size:1em – czyli 16px.

text definiujemy p:font-size:0.875em co daje 14px.

dokonywanie obliczeń ułatwia strona: pxtoem.com

 

Jednostki % i em obliczane są dla elementu nadrzędnego, kolejne zagnieżdżenie powoduje kolejne obliczenia:

<body style="font-size:1em; (16px)">

<section style="font-size:0.875em; (14px)">

<div style="font-size:0.714em; (10px)">

<article style="font-size:1.4em; (14px)">...</article>

</div>

</section>

</body>
  • rem – root em (bazowa em)

jednostka określana względem głównego elementu dokumentu html.

body{
 font-size:1em; /* bazowe 16px */
}
section{
 font-size:0.875rem;
 font-size:14px; /* IE8 and earlier*/
}
div{
 font-size:0.625rem;
 font-size:10px; /* IE8 and earlier*/ 
}
article{
 font-size:0.875rem;
 font-size:14px; /* IE8 and earlier*/
}

 

  • vw – viewport width – szerokość widoku
  • vh – viewport height  – wysokość widoku

jednostki ułatwiające skalowanie wielkości czcionki w zależności od wielkości okna.

nie wszystkie przeglądarki je obsługują, co sprawdzić można na:

  • w3.org/TR/css3-values/
  • caniuse.com

 

Osadzanie czcionek

reguła css @font-face

 

IE8 i wcześniejsze wymagają zastosowania czcionki typu EOT

iOS 4.1 i wcześniejsze wymagają zastosowania czcionki typu SVG

 

pobranie czcionek z google.com/fonts

wygenerowanie kodu potrzebnego do osadzenia posiadanej czcionki z fontsquirrel.com

@font-face {
    font-family: 'montserratultra_light';
    src: url('../webfonts/montserrat-ultralight-webfont.eot');
    src: url('../webfonts/montserrat-ultralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/montserrat-ultralight-webfont.woff2') format('woff2'),
         url('../webfonts/montserrat-ultralight-webfont.woff') format('woff'),
         url('../webfonts/montserrat-ultralight-webfont.ttf') format('truetype'),
         url('../webfonts/montserrat-ultralight-webfont.svg#montserratultra_light') format('svg');
    font-weight: normal;
    font-style: normal;
}

p{
  font-family:"montserratultra_light", Helvetica, Arial, sans-serif;
}

Zaawansowane ustawienia generowania czcionki

 

Wielkość czcionek – dopasowanie szerokości elementu nadrzędnego.

 

Plugin biblioteki jQuery – FitTrxt – skaluje text nagłówka by wypełniał cały element nadrzędny.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="mypath/js/fittext.js" type="text/javascript"></script> 
    <script type="text/javascript">
      $("#h_responsive").fitText(1, {minFontSize:'16px', maxFontSize:'36px'});
    </script>

gdzie:

  • 1 – wartość kompresji, większa (1.6) daje płynniejsze zmiany wielkości treści, mniejsza (0.6) – skokowe zmiany wielkości tekstu.
  • min/max FontSize – wartości graniczne wielkości.

Domyślna wartość ustawia wielkość czcionki na 1/10 szerokości elementu.

 

Plugin biblioteki jQuery SlabText – tworzenie responsywnych nagłówków.

Plugin biblioteki jQuery Letterring – pozwala na kontrole nad każdą literą nagłówka poprzez nadanie poszczególnym znakom, słowom, wierszom klas.

poprzez:

<script type="text/javascript">
  $(document).ready(function(){
    $(".myHeadline").lettering();
  });
</script>

<script type="text/javascript">
  $(document).ready(function(){
    $(".myHeadline").lettering("words");
  });
</script>

<script type="text/javascript">
  $(document).ready(function(){
    $(".myHeadline").lettering("lines");
  });
</script>

Plugin biblioteki jQuery Kerning – pozwala na modyfikację kerningu, ułożenia liter, koloru, odstępów.
Plugin biblioteki jQuery Responsive Measures – pozwala na dopasowanie czcionki do wielkości elementu poprzez wskazanie selektora.

CSS3

Hope this helps and happy coding :)

Zobacz jeszcze

Generatory zastępczych obrazków - image placeholder

picsum.photos picsum.photos generuje za każdym odświeżeniem strony ten sam lub losowy obrazek prostokąty lub kwadratowy (jeśli użyjemy tylko jednej wartości wymiaru) z określonym przez nas...

box-model - box-sizing

wymiarowanie elementów. box-sizing: content-box -> wysokość i szerokość (min/max wysokość, szerokość) kontentu bez wliczania ramki, dopełnienia i marginesów (border, padding,...

Powrót