Spring Boot vs Quarkus the ultimate battle - DevoxxUK
What the @font-face
1.
2.
3.
4. What is @font-face?
• CSS2 rule
• Allows embedding of fonts through
css
• Access hosted fonts instead of
relying on user’s installed fonts
5. What’s the big deal?
• Rely on native browser rendering,
the same as with web safe fonts
• Cufon/sifr great but css support is
incomplete, plus relies on javascript
• It’s easy
• Print stylesheets work with @font-
face
10. With great power comes
great responsibility
• @font-face makes knowledge of
typography even more important
• great design has been done with
only web-safe fonts
15. So how do you do it?
@font-face {
font-family: 'PTSansRegular';
src: url('PT_Sans.eot');
src: local('PT Sans Regular'), local('PTSans-Regular'),
url('PT_Sans.woff') format('woff'),
url('PT_Sans.ttf') format('truetype'),
url('PT_Sans.svg#PTSans-Regular') format('svg');
}
p {
font-family: "PTSansRegular", Helvetica, Arial, sans-serif;
}
Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
16. So how do you do it?
@font-face {
font-family: 'PTSansRegular';
src: url('PT_Sans.eot');
src: local('PT Sans Regular'), local('PTSans-Regular'),
url('PT_Sans.woff') format('woff'),
url('PT_Sans.ttf') format('truetype'),
url('PT_Sans.svg#PTSans-Regular') format('svg');
}
p {
font-family: "PTSansRegular", Helvetica, Arial, sans-serif;
}
Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
17. So how do you do it?
@font-face {
font-family: 'PTSansRegular';
src: url('PT_Sans.eot');
src: local('PT Sans Regular'), local('PTSans-Regular'),
url('PT_Sans.woff') format('woff'),
url('PT_Sans.ttf') format('truetype'),
url('PT_Sans.svg#PTSans-Regular') format('svg');
}
p {
font-family: "PTSansRegular", Helvetica, Arial, sans-serif;
}
Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
18. So how do you do it?
@font-face {
font-family: 'PTSansRegular';
src: url('PT_Sans.eot');
src: local('PT Sans Regular'), local('PTSans-Regular'),
url('PT_Sans.woff') format('woff'),
url('PT_Sans.ttf') format('truetype'),
url('PT_Sans.svg#PTSans-Regular') format('svg');
}
p {
font-family: "PTSansRegular", Helvetica, Arial, sans-serif;
}
Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
19. So how do you do it?
@font-face {
font-family: 'PTSansRegular';
src: url('PT_Sans.eot');
src: local('PT Sans Regular'), local('PTSans-Regular'),
url('PT_Sans.woff') format('woff'),
url('PT_Sans.ttf') format('truetype'),
url('PT_Sans.svg#PTSans-Regular') format('svg');
}
p {
font-family: "PTSansRegular", Helvetica, Arial, sans-serif;
}
Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
20. So how do you do it?
@font-face {
font-family: 'PTSansRegular';
src: url('PT_Sans.eot');
src: local('PT Sans Regular'), local('PTSans-Regular'),
url('PT_Sans.woff') format('woff'),
url('PT_Sans.ttf') format('truetype'),
url('PT_Sans.svg#PTSans-Regular') format('svg');
}
p {
font-family: "PTSansRegular", Helvetica, Arial, sans-serif;
}
Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
21. Licensing
• Make sure you own a license for
font
• Read the EULA from each foundry.
• Take precautions to secure the
font from download
• Typekit fills a void
22. Browser Differences
Firefox Mac IE/FF XP with Cleartype
Firefox XP w/o Cleartype IE6 w/o Cleartype
23. IE Jaggy Fix
p {
filter: alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
24. IE Jaggy Fix
p {
filter: alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
26. Fighting the FOUT
• place css at top so it loads first
• use Paul Irish embed method
• use server side compression to
serve files (zip/gzip)
• base64 encode ttf/otf fonts
• subset fonts to reduce file size
34. Fighting the FOUT
• place css at top so it loads first
• use Paul Irish embed method
• use server side compression to serve
files
• base64 encode ttf/otf fonts
• subset fonts to reduce file size
36. Use correct font for styles
h1, strong {
font-weight: normal;
font-family: "PTSansBold", Helvetica, Arial, sans-serif;
}
em {
font-style: normal;
font-family: "PTSansItalic", Helvetica, Arial, sans-serif;
}
• Webkit interprets correctly, other
browsers not so much
37. My @font-face site: petridisc.com
Resources & Tools
fontsquirrel.com
webfonts.info
paulirish.com
typekit.com
webfontspecimen.com
Get crackin’.
Notas do Editor
CSS2 finished in 1998
<font> - let you figure that one out
images - hard to maintain, not as accessible, potentially large
web fonts - limited # of fonts, but the way it&#x2019;s done today, in conjunction with cufon
FF3 released 6/08, FF 3.5 released 6/09, matter of months will be smaller. Chrome is growing, but new installs will support. Seems to have slower uptake. Is it a client site or personal? Who is the audience? Will your client understand if things don&#x2019;t look exactly the same everywhere?
colamovies jan 2010. Important to look at your stats.
colamovies jan 2010. Important to look at your stats.
colamovies jan 2010. Important to look at your stats.