Skautské webfonty

Instalace

Zkopíruj CSS kód dle potřeby do CSS kódu Tvého webu. Nebo si CSS soubor přímo stáhni.

Stáhni si CSS soubor zde

Dostyluj velikost, barvu a jednotlivé typy textu (body, nadpisy h1-h6, odstavec p a další) v CSS kódu Tvého webu podle potřeby.

V případě jednorázové potřeby jednoho z řezů můžeš použít předem nastylované tagy <strong> a <em>.

Pokud používáš redakční systém WordPress, můžeš také využít plugin či skautské šablony od Dobrého skautského webu:

SKAUT Font plugin Šablona DSW1 pro oddíly Šablona DSW2 pro oddíly Šablona DSW3 pro střediska

CSS kód

Tento kód obsahuje veškeré nastavení textu z tohoto webu. Případně si můžeš stáhnout pouze základní definici webových písem.

Nezapomeň si velikost textu a další typy textu dostylovat dle potřeby!

Stáhni si CSS soubor tohoto webu zde Stáhni si pouze definici webových písem
                
  @charset "utf-8";
  /* CSS Document */
  @font-face {
      font-family: 'themix';
      src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400.eot');
      src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400.eot? #iefix') format('embedded-opentype');
      src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400.woff') format('woff'),
  		 url('https://cdn.skauting.cz/fonts/TheMix_LT_400.woff2') format('woff2'),
           url('https://cdn.skauting.cz/fonts/TheMix_LT_400.otf') format('opentype'),
           url('https://cdn.skauting.cz/fonts/TheMix_LT_400.svg#themix') format('svg');
      font-weight: 400;
      font-style: normal;
  }
  
  @font-face {
      font-family: 'themix';
      src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.eot');
      src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.eot? #iefix') format('embedded-opentype');
      src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.woff') format('woff'),
  		 url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.woff2') format('woff2'),
           url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.otf') format('opentype'),
           url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.svg#themix') format('svg');
      font-weight: 400;
      font-style: italic;
  }
  
  @font-face {
      font-family: 'themix';
      src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700.eot');
      src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700.eot? #iefix') format('embedded-opentype');
      src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700.woff') format('woff'),
  		 url('https://cdn.skauting.cz/fonts/TheMix_LT_700.woff2') format('woff2'),
           url('https://cdn.skauting.cz/fonts/TheMix_LT_700.otf') format('opentype'),
           url('https://cdn.skauting.cz/fonts/TheMix_LT_700.svg#themix') format('svg');
      font-weight: 700;
      font-style: normal;
  }
  
  
  @font-face {
      font-family: 'themix';
      src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.eot');
      src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.eot? #iefix') format('embedded-opentype');
      src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.woff') format('woff'),
  		 url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.woff2') format('woff2'),
           url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.otf') format('opentype'),
           url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.svg#themix') format('svg');
      font-weight: 700;
      font-style: italic;
  }
  
  @font-face {
      font-family: 'skautbold';
      src: url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.eot');
      src: url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.eot? #iefix') format('embedded-opentype');
      src: url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.woff') format('woff'),
     		 url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.woff2') format('woff2'),
  		 url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.otf') format('opentype'),
           url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.svg#skautbold') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  
  /* Typography Scale: https://www.modularscale.com/?1&rem&1.2 */
  
  html {
     /* Set Base Text Size */
     font-size: 16px;
  }
  body {
  	font-family: themix, sans-serif;
  	color: #00395b;
  }
  
  h1, .h1 {
  	font-family: skautbold, sans-serif;
  	font-weight: normal;
  	font-size: 2.986rem;
  }
  
  h2, .h2 {
  	font-weight: 700;
  	font-size: 2.488rem;
  }
  
  h3, .h3 {
  	font-weight: 700;
  	font-size: 2.074rem;
  }
  
  h4, .h4 {
  	font-weight: 700;
  	font-style: italic;
  	font-size: 1.728rem;
  }
  
  h5, .h5 {
  	font-weight: 700;
  	font-size: 1.44rem;
  }
  
  h6, .h6 {
  	font-weight: 700;
  	font-style: italic;
  	font-size: 1.2rem;
  }
  
  p {
  	font-weight: 400;
  	font-style: normal;
  	font-size: 1rem;
  }
  
  b {
  	font-weight: 700;
  }
  
  i {
  	font-style: italic;
  }
  
  .italic {
  	font-style: italic;
  }
  
  .bold {
  	font-weight: 700;
  }
  
  .uvodlogo {
  	max-height: 200px;
  	min-height: 70px
  }
                
              

HTML kód

Následující HTML kód Ti ukáže, jak jednoduše stylovat text.

Nadpis velikosti H1

                  
  <h1>
    Nadpis velikosti H1
  </h1>
                
              

Nadpis velikosti H2

                  
  <h2>
    Nadpis velikosti H2
  </h2>
                
              

Nadpis velikosti H3

                  
  <h3>
    Nadpis velikosti H3
  </h3>
                
              

Nadpis velikosti H4

                  
  <h4>
    Nadpis velikosti H4
  </h4>
                
              

Nadpis velikosti H5

                  
  <h5>
    Nadpis velikosti H5
  </h5>
                
              

Nadpis velikosti H6

                  
  <h6>
    Nadpis velikosti H6
  </h6>
                
              

Odstavec běžného textu. Odstavec běžného textu lze dostylovat příslušnými tagy přímo pro daná slova, spojení či věty.

                  
  <p>
    Odstavec běžného textu. Odstavec běžného textu lze 
      <strong>
        dostylovat
      </strong> 
    příslušnými tagy přímo 
      <em>
        pro daná slova, spojení či věty.
      </em>
  </p>
                
              

Odstavec běžného textu, který je kurzívou.

                  
  <p class="italic">
    Odstavec běžného textu, který je kurzívou.
  </p>
                
              

Odstavec běžného textu, který je tučně.

                  
  
  <p class="bold">
    Odstavec běžného textu, který je tučně.
  </p>
                
              

Odstavec běžného textu, který je tučnou kurzívou.

                  
  <p class="bold italic">
    Odstavec běžného textu, který je tučnou kurzívou.
  </p>