1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>FFFFALLBACK - A simple tool for bulletproof web typography.</title>
<meta name="description" content="Bulletproof web typography, bookmarklet, web fonts">
<meta name="author" content="Josh Brewer">
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/screen.css">
<script type="text/javascript" src="http://use.typekit.com/rbn4gdu.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<span class="horizon rising"></span>
<div id="main">
<div class="content">
<hgroup class="ir">
<h1>FFFFALLBACK</h1>
<h2>A simple tool for bulletproof web typography.</h2>
</hgroup>
<p><strong><span class="brave"><i class="ir">It's a brave new world.</i></span> Web fonts are here, sparking an exciting new era in web design. Ffffallback makes it easy to find the perfect fallback fonts, so you can make sure your designs degrade gracefully. Fffallback means better layouts for everyone.</strong></p>
<p>So in the spirit of bulletproof web design, we give you…</p>
<div id="bkmrklt">
<a href="#">ffffallback</a>
<span>the bookmarklet!</span>
</div>
<h3>Okay, so how do I use this thing?</h3>
<!--[if IE]>
<ol>
<li>Well… you don't. We noticed you are using Internet Explorer. Unfortunately, this tool doesn't work in IE at this time.</li>
<li>If you have Firefox or Chrome installed, please visit this page in either of those browsers and follow the instructions. </li>
<li>If you don't have either of those browsers installed, we strongly encourage you to download <a href="http://www.google.com/chrome/">Chrome</a> or <a href="http://firefox.com">Firefox</a> now!</li>
</ol>
<![endif]-->
<aside>
<p>Small caveat: this bookmarklet only works on webkit browsers (Chrome & Safari) or Firefox. We <strike>are</strike> might get it working for IE and Opera if time permits.</p>
</aside>
<ol class="steps">
<li><strong>Drag</strong> the bookmarklet to your browser toolbar.</li>
<li>Go to the page you want to test and <strong>click</strong> the bookmarklet to get started.</li>
<li>The bookmarklet will scan the CSS of the page in order to identify existing web fonts. Then, using magical unicorns and javascript rainbows, FFFFALLBACK clones the page and provides a tool where you can test and analyze different fallback font choices.
<span class="note">You can also add an input in order to change font-size, line-height, color, etc.</span>
</li>
<li>Bulletproof your font-stacks and <strong>rejoice</strong>!</li>
</ol>
<p>For more background on how this came to be and why it's important, read <a href="http://blog.typekit.com/2011/03/24/type-study-choosing-fallback-fonts/">Type study: Choosing fallback fonts</a>.</p>
<span class="horizon setting"></span>
<footer>
<p><span class="clear"><a href="mailto:feedback@fallback.com">Questions, comments & feedback</a><span> · </span><a href="https://github.com/jbrewer/ffffallback">Fork it on Github</a></span>
Handcrafted by <a href="http://twitter.com/jbrewer">@<span>jbrewer</span></a> and <a href="http://twitter.com/shinypb">@<span>shinypb</span></a>, with love, in San Francisco.</p>
<p><small>Extra big high-fives to the kind souls whose encouragement brought this to life: <a href="http://twitter.com/TrentWalton">Trent Walton</a>, <a href="http://twitter.com/TimBrown">Tim Brown</a>, <a href="http://twitter.com/Kyle">Kyle Sollenberger</a>, <a href="http://twitter.com/yarcom">Yaron Schoen</a> and <a href="http://twitter.com/aworkinglibrary">Mandy Brown</a>.</small></p>
<p class="tweet">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ffffallback.com" data-text="I'm using @ffffallback to help bulletproof my web typography. Check it out!" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<small>Tell the world about FFFFALLBACK!</small>
</p>
</footer>
</div>
</div>
<script src="js/css_browser_selector.js" ></script>
<script>
var myURL = window.location.toString();
var baseURL;
if(myURL.match(/\.html$/)) {
var urlChunks = myURL.split('/');
baseURL = urlChunks.slice(0, urlChunks.length - 1).join('/')
} else {
baseURL = myURL;
}
if(baseURL.substring(myURL.length - 1) !== '/') {
baseURL += '/';
}
var jsURL = baseURL + 'bookmarklet/ffffallback.js?r=' + Math.random();
var cssURL = baseURL + 'bookmarklet/ffffallback.css?r=' + Math.random();
var bookmarkletSource = 'javascript:' +
"(function() {\
var scriptTag = document.createElement('script');\
scriptTag.setAttribute('src', '" + jsURL + "');\
var linkTag = document.createElement('link');\
linkTag.setAttribute('href', '" + cssURL + "');\
linkTag.setAttribute('rel','stylesheet');\
document.body.appendChild(scriptTag);\
document.body.appendChild(linkTag);\
})();".replace(/\n/g, ' ');
document.getElementById('bookmarklet').setAttribute('href', bookmarkletSource);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-109790-10']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
|
