Typsnitt

I shot the Serif Writing Typographic Symbols Anfang Anfang

Förkortningar

  • TTF - True Type Font
  • OTF - Open Type Fonts (Adobe)
  • EOT - Embedded Open Type
  • WOFF - Web Open Font Format (Mozilla)
  • SVG - Scalable Vector Graphics
  • WOFF2 -
  • FOUT - Flash of Unstyled Text

Font Awesome

  • fa-font

Filändelser

  • .ttf
  • .eot
  • .svg
  • .woff
  • .woff2

CSS

font-display: inherit; font-family: inherit; font-feature-settings: inherit; font-kerning: inherit; font-language-override: inherit; font-size: inherit; font-size-adjust: inherit; font-stretch: inherit; font-style: inherit; font-synthesis: inherit; font-variant: inherit; font-weight: inherit; 0 vs O Double-story and single-story lowercase miniscule G Serif och Sans Serif

Vad är en serif?

En serif är en bokstav med ett typsnitt där bokstäverna har "klackar".

Kerning

Exempel på ligaturer

ff
fi
fl
ffi
ffl

ff
fi
fl
ffi
ffl

Font Awesome logotyp

Font Awesome

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.1/css/all.css"> <script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

Material Icons

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Typsnitt från Google

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans"> @import url(//fonts.googleapis.com/css?family=Open+Sans);

Typsnitt från egen serveer

@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }

Mapp för fonter i operativsystemet Os X

/Volumes/Macintosh HD/Library/Fonts /System/Library/Fonts FontPrep logotyp

Program

Font Awesome logotyp Comic sans

Exempel på vanliga typsnitt

  • Arial
  • Comic Sans MS
  • Courier
  • Font Awesome
  • Impact
  • Georgia
  • Helvetica
  • Verdana
  • Lithos Pro
  • Monospace
  • Papyrus
  • Times New Roman
  • Trebuchet
  • Verdana
FiraCode Hand of Sean Braille Neue Standard

Exempel på fler typsnitt

Lorem ipsum Ikoner i block CSS 3 logotyp Fontello logotyp

Externa länkar

MyFonts logotyp Stanley logotyp Yard font