CSS
Typografi

Syntax

• font: [ font-style ] [font-variant] [font-vikt] font-size [/ line-höjd] font-family ;
• font-style: font-style
• font-variant: font-variant
• font-vikt: font-vikt ;
• font-size: font-size ;
• linjehöjd: linjehöjd ;
• font-family: font-family ;
• färg: färg ;
• citat: ingen | sträng | initial | ärva ;
• font-stretch: font-stretch ;
• text-align: text-align ;
• textintryck: längd | initial | ärva ;
• text-overflow: klipp | ellipsis | sträng | initial | ärva ;
• text-transform: none | versaler | versaler | gemener | initial | ärva ;
• text-skugga: h-skugga v-skugga oskärpa-radie färg | ingen | initial | ärva ;
• font-size-adjust: antal | ingen | initial | ärva;
• font-stretch: ultra-kondenserad | extra-kondenserad | kondenserad | semi-kondenserad | normal | semi-expanderad | expanderad | extra-expanderad | ultra-expanderad | initial | ärva;
• bindestreck: ingen | manual | auto ;
• tab-storlek: antal | längd | initial | ärva ;
• bokstavsavstånd: normal | längd | initial | ärva ;
• ordavstånd: normal | längd | initial | ärva ;

parametrar

Anmärkningar

Textstorlek

HTML:

<div id="element-one">Hello I am some text.</div>
<div id="element-two">Hello I am some smaller text.</div>

CSS:

#element-one {
    font-size: 30px;   
}

#element-two {
    font-size: 10px;
}

Texten inuti #element-one kommer att vara 30px i storlek, medan texten i #element-two är 10px i storlek.

Teckensnittet Shorthand

Med syntaxen:

element {
    font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}

Du kan ha alla dina teckensnittrelaterade stilar i en deklaration med font . Använd helt enkelt font och placera dina värden i rätt ordning.

Till exempel, för att göra alla p element fetstilta med en teckenstorlek på 20px och använda Arial som teckensnittsfamilj, brukar du koda det enligt följande:

p {
    font-weight: bold;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

Men med teckensnittet korta kan det kondenseras på följande sätt:

p {
    font: bold 20px Arial, sans-serif;
}

Observera : Eftersom font-style , font-variant , font-weight och line-height är valfritt, hoppas de tre över i det här exemplet. Det är viktigt att notera att med hjälp av genvägen återställs de andra attributen som inte har givits. En annan viktig punkt är att de två nödvändiga attributen för att typsnittet ska fungera är font-size och font-family . Om de inte båda ingår ignoreras genvägen.

Startvärde för var och en av egenskaperna:

• font-style: normal;
• font-variant: normal;
• font-weight: normal;
• font-stretch: normal;
• font-size: medium;
• line-height: normal;
• font-family - beror på användaragenten

Fontstaplar

font-family: 'Segoe UI', Tahoma, sans-serif;

Webbläsaren kommer att försöka tillämpa teckensnittet "Segoe UI" på tecknen inom elementen som riktas mot ovanstående egenskap. Om det här teckensnittet inte är tillgängligt, eller om teckensnittet inte innehåller en glyph för det obligatoriska tecknet, kommer webbläsaren att falla tillbaka till Tahoma, och, om nödvändigt, något sans-serif-teckensnitt på användarens dator. Observera att alla typsnittsnamn med mer än ett ord, till exempel "Segoe UI", måste ha enstaka eller dubbla citat runt omkring dem.

font-family: Consolas, 'Courier New', monospace;

Webbläsaren kommer att försöka tillämpa teckensnittet "Consolas" på tecknen inom de element som riktas mot ovanstående egenskap. Om det här teckensnittet inte är tillgängligt, eller om teckensnittet inte innehåller en teckenfiler för det önskade tecknet, kommer webbläsaren att falla tillbaka till "Courier New", och, om nödvändigt, till ett monospace-teckensnitt på användarens dator.

Teckenavstånd

h2 {
  /* adds a 1px space horizontally between each letter;
     also known as tracking */
  letter-spacing: 1px;
}

Egenskapen bokstavsavstånd används för att specificera avståndet mellan tecknen i en text.

! bokstavsavstånd stöder också negativa värden:

p {
  letter-spacing: -1px;
}

Resurser: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-space

Textomvandling

Den text-transform egenskapen kan du ändra aktivering av text. Giltiga värden är: uppercase , capitalize , lowercase , initial , inherit och none

CSS:

.example1 {
    text-transform: uppercase;
}
.example2 {
    text-transform: capitalize;
}
.example3 {
    text-transform: lowercase;
}

html

<p class="example1">
    all letters in uppercase  <!-- "ALL LETTERS IN UPPERCASE" -->
</p>
<p class="example2">
    all letters in capitalize <!-- "All Letters In Capitalize (Sentence Case)" -->
</p>
<p class="example3">
    all letters in lowercase  <!-- "all letters in lowercase" -->
</p>

Textintryck

p {
    text-indent: 50px;
}

Egenskapen text-indent anger hur mycket horisontell rymdtext som ska flyttas innan början av den första raden i textens innehåll i ett element.

Resurser:

• Ange bara den första raden i ett stycke?
• https://www.w3.org/TR/CSS21/text.html#propdef-text-indent
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Textdekoration

Den text-decoration egendom används för att ange eller ta bort dekorationer från text.

h1 { text-decoration: none; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }

text-dekoration kan användas i kombination med text-dekoration-stil och text-dekoration-färg som en kort egenskap:

.title { text-decoration: underline dotted blue; }

Detta är en kort version av

.title {
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-decoration-color: blue;
}

Det bör noteras att följande egenskaper endast stöds i Firefox

• text-decoration-färg
• text-decoration-line
• text-decoration-stil
• text-decoration-skip

Textöverskridning

text-overflow handlar om hur överflödat innehåll ska signaleras till användare. I det här exemplet representerar ellipsis klippt text.

.text {
  overflow: hidden;
  text-overflow: ellipsis;
}

Tyvärr text-overflow: ellipsis fungerar bara på en enda rad text. Det finns inget sätt att stödja ellipsis på den sista raden i standard CSS, men det kan uppnås med icke standard standard implementering av flexboxar.

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

Exempel (öppet i Chrome eller Safari):

http://jsfiddle.net/csYjC/1131/

Resurser:

https://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0

Ordavstånd

Egenskapen för ordavstånd specificerar avståndet mellan taggar och ord.

Möjliga värden

• en positiv eller negativ längd (med em px vh cm etc.) eller procent (med % )
• nyckelordet normal använder teckensnittets standardordavstånd
• nyckelordet inherit tar värdet från överordnade element

CSS

.normal    { word-spacing: normal; }
.narrow    { word-spacing: -3px; }
.extensive { word-spacing: 10px; }

html

<p>
  <span class="normal">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="narrow">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="extensive">This is an example, showing the effect of "word-spacing".</span><br>
</p>

Online-Demo

Prova själv

Vidare läsning:

• ordavstånd - MDN
• ordavstånd - w3.org

Textriktning

div {
    direction: ltr; /* Default, text read read from left-to-right */
}
.ex {
    direction: rtl; /* text read from right-to-left */
}
.horizontal-tb {
    writing-mode: horizontal-tb; /* Default, text read from left-to-right and top-to-bottom. */
}
.vertical-rtl {
    writing-mode: vertical-rl; /* text read from right-to-left and top-to-bottom */
}
.vertical-ltr {
    writing-mode: vertical-rl; /* text read from left-to-right and top to bottom */
}

direction används för att ändra ett horisontellt textriktning för ett element.

Syntax: direction: ltr | rtl | initial | inherit;

Den writing-mode egendom ändrar inriktningen av text så att den kan läsas uppifrån och ned eller från vänster till höger, beroende på vilket språk.

Syntax: direction: horizontal-tb | vertical-rl | vertical-lr;

Font Variant

Egenskaper:

vanligt

Standardattribut för teckensnitt.

små bokstäver

Anger varje bokstav till stora versaler, men gör små bokstäver (från originaltext) mindre i storlek än de bokstäver som ursprungligen har stora versaler.

CSS:

.smallcaps{
   font-variant: small-caps;
}

HTML:

<p class="smallcaps">
    Documentation about CSS Fonts
    <br>
    aNd ExAmpLe
</p>

ouput:

Obs: Egenskapen font-variant är en kortfattad egenskap: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures och font-variant-east-asian.

Citat

quotes används för att anpassa öppnings- och stängningscitationstecken för <q> -taggen.

q {
    quotes: "«" "»";
}

Text Shadow

För att lägga till skuggor i text använder du egenskapen text-shadow . Syntaxen är som följer:

text-shadow: horizontal-offset vertical-offset blur color;

Skugga utan suddighetsradie

h1 {
  text-shadow: 2px 2px #0000FF;
}

Detta skapar en blå skuggeffekt runt en rubrik

Skugga med suddighetsradie

För att lägga till en suddighetseffekt, lägg till ett alternativ för blur radius

h1 {
  text-shadow: 2px 2px 10px #0000FF;
}

Flera skuggor

För att ge ett element flera skuggor, separera dem med kommatecken

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}