Uttrycka det

CSS i 10 år existens i år! De som har funnits ett tag, tjäna sitt bröd (eller inte) med hjälp av CSS, så du kanske vet hur vi har svälta för att ett bra utbud av teckensnitt. Även med avsaknaden av typsnitt designers som de på CSS Zen Garden har använt sig av CSS bakgrundsbilder att ersätta teckensnitt i jakten på att göra lite rättvisa sina konstruktioner. Vi har också försökt Flash / JavaScript ® hacka för att nå våra mål. På intet sätt är detta ett fel sätt att få typsnitt vi önskar i våra web design, men definitivt är det inte det mest önskvärda sättet. och under åren webbdesigner, liksom jag, har fullt förlitat sig på ett tiotal teckensnitt för sina konstruktioner.

Den senaste utvecklingen inom webbstandarder och format typsnitt gör det möjligt att göra HTML-text i typsnitt än samma gamla standard teckensnitt. Kommer i "@ fontface" CSS decleration.

@ Fontface provids en lösning för att länka till den aktuella teckensnittet filen och hämta det från webben. Med @ fontface kan designers använder typsnitt utan att behöva frysa texten som bakgrundsbilder. Genomförandet är mycket rakt fram, som visas nedan men som alla goda ting har en CON del av avtalet, inte alla webbläsare stödjer en enda "typsnitt". Om du planerar att använda @ fontface i sida med som kräver kors webbläsare support, då du måste ge källor till olika teckensnitt-typer av densamma.

1. TrueType - Ett ​​format utformad för att se bra ut på skärmen. Rekommenderas speciellt för Windows webbläsare (Chrome).
2. OpenType (CFF) - Detta format är bättre för tryck arbete och inte alltid ser bra ut på Windows.
3. EOT - Du behöver detta format om du vill rikta Internet Explorer. IE kommer inte att använda ett annat format. Vår EOT: s skulle vara "Lite", eftersom de varken komprimeras eller domän-begränsad.
4. SVG - Detta är ett XML-format som stöds av vissa webbläsare, inklusive iPhone.
5. WOFF - Detta cross-browser, web-only font format är lätt (Font data är zip komprimerat) och kan sammanställas med antingen TrueType eller PostScript (CFF) beskriver. Det stöds för närvarande av Firefox 3.6 +.

Användning @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular ';
 src: url ('CalligraphyFLF.eot');
 src: Lokal (CalligraphyFLF '), lokal (CalligraphyFLF), url ("CalligraphyFLF.woff) format (" WOFF), url ("CalligraphyFLF.ttf) format (" TrueType), url ("CalligraphyFLF . SVG # CalligraphyFLF) format ("SVG ');
 }
 @ Font-face {
   font-family: "Din typsnitt";
   src: url ("typsnitt / font_filename.eot");
   src: lokal ("Alternate namn"), lokal ("Alternatename"),
     url ("typsnitt / font_filename.woff") format ("WOFF"),
     url ("typsnitt / font_filename.otf") format ("OpenType"),
     url ("typsnitt / font_filename.svg # font_filename") format ("SVG");
   }
 H2 {font-family: "Din typsnitt", Georgia, serif;} 

Som du kan se från exemplet ovan, att inkludera den valda teckensnittet, måste man länka till en uppsättning fonttypes för samma typsnitt. Därför människor hänvisar till det som "Font Kit".
Det finns Font kit som uttryckligen tillåter samman med CSS @ font-face egenskapen den under End User License Agreement (EULA).

Användbara WebFont resurser:

• Teckensnitt för @ font-face bäddat wiki sida på http://webfonts.info/wiki/index.php?title=Main_Page
  
• Stråle Larabie . Han är ett välkänt typsnitt designer som har gjort hundratals intressanta TrueType teckensnitt fritt tillgängliga för användning på webben. Hans typsnitt är elegant, dekorativa och lekfulla.
• Dieter Steffmann är en annan stor font designer. Även han har gjort många vackra typsnitt tillgängliga för alla att använda.
• Font butiken : erbjuder typsnitt som utformats speciellt för webb. Mer än 30 av de mest framgångsrika FontFont familjerna finns nu som Web FontFonts. FontShop har också en detaljerad WebFont manual http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Squirrel : visar upp alla de teckensnitt som Font Squirrel erbjuder för användning med @ font-face CSS inbäddning. Font Squirrel erbjuder en imponerande mängd av typ, är det dött enkelt att välja en ut, och handily erbjuder "kit" - typsnittet som du väljer, i flera format, medföljer demo HTML & CSS som använder mycket aktuellt @ font-face syntax . De erbjuder också ett sätt att göra dina egna @ font-face kit . Om typsnittet du vill använda har licensierats lämpligt sätt (de som följde med datorn är inte nödvändigtvis okej), producerar generatorn EOT, SVG, och hey! WOFF filer.