Download presentation
Presentation is loading. Please wait.
1
Week 3
2
Typography @font-face – now is the time
3
@font-face CSS property allows you to embed fonts in web pages Fonts are hosted on a web server and downloaded to the visitors computer Must have proper license to do this Some licenses are free Not all fonts have a web font license Always check
4
@font-face { font-family: "Calibri"; src: url("http://www.example.com/fonts/calibri.ttf") format ("truetype"); } h1 { font-family: "Calibri", sans-serif; }
5
Embedded Open Type (Microsoft) IE 4+ Scalable Vector Graphics Fonts embedded in SVG documents, a type of XML file TrueType / OpenType TrueT ype invented by Apple in late 80s; OpenType is Microsoft/Adobe’s extension of TrueType Web Open Font Format Think of it as a compressed container file for TrueType/OpenType fonts and metadata Will likely be the W3C standard for web fonts
6
Internet Explorer (all versions): EOT Safari (3.2+): TTF / OTF iPhone (3.1) SVG Chrome (all versions): SVG (TTF/OTF added 25th Jan 2010) Firefox (3.5+): TTF/OTF (WOFF added 3.6) Opera (10+) TTF/OTF
7
EOT: All versions of IE SVG: iPhone, Opera 9+, Chrome TTF / OTF: Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4+, IE 9+ (font embedding permissions set to installable) WOFF: Firefox 3.6+, Chrome 5+, Opera Presto, IE 9+, Mac OS X Safari 5.1+
8
@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); } Or @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); }
9
@font-face { font-family: 'AlegreyaRegular'; src: url('Alegreya-Regular-webfont.eot'); src: url('Alegreya-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('Alegreya-Regular-webfont.woff') format('woff'), url('Alegreya-Regular-webfont.ttf') format('truetype'), url('Alegreya-Regular-webfont.svg#AlegreyaRegular') format('svg'); font-weight: normal; font-style: normal; }
10
http://www.w3.org/Talks/2010/0313- Fonts-SXSW/ http://www.miltonbayer.com/font-face/ http://www.w3schools.com/cssref/css3_pr _font-face_rule.asp http://paulirish.com/2009/bulletproof- font-face-implementation-syntax/
Similar presentations
© 2018 SlidePlayer.com Inc.
All rights reserved.
Ppt on let us preserve our heritage By appt only movie site Ppt on fibonacci series Ppt on earth movements and major landforms in hawaii Ppt on rag picking Seminar ppt on circuit breaker Ppt on national education day nepal Ppt on class 10 hindi chapters books Ppt on data handling for class 2 Download ppt on environmental degradation