-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
116 lines (104 loc) · 6.14 KB
/
index.html
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">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<link rel="shortcut icon" href="/favicon.ico">
<script type="text/javascript" src="http://use.typekit.com/rbn4gdu.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<link rel="stylesheet" href="css/screen.css">
<!--[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>
<h1>FFFFALLBACK</h1>
<h2>A simple tool for bulletproof web typography.</h2>
</hgroup>
<p><span class="brave"><i>It's a brave new world.</i></span> <strong>Web fonts are here, sparking an exciting new era in web design. <span class="smcap">Ffffallback</span> makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.</strong></p>
<p>So, in the spirit of bulletproof web design, we give you…</p>
<div class="bkmrklt">
<a href="#" id="bookmarklet" data-drag="Drag me! ➹">ffffallback</a>
<span>the bookmarklet!</span>
</div>
<h3>Okay, so how do I use this thing?<a href="#caveat">*</a></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]-->
<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.</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, <span class="smcap">FFFFALLBACK</span> clones the page and provides a tool where you can test and analyze different fallback font choices.
<ol>
<li class="note">You can also toggle open an input in order to change font-size, line-height, color, etc. Remember to use <strong>!important</strong>, as it’s…well, you know, important.</li>
</ol>
</li>
<li>Bulletproof your font-stacks and <strong>rejoice</strong>!</li>
</ol>
<aside class="caveat">
<p><strong>*</strong> Small caveat: this bookmarklet only works on webkit browsers (Chrome & Safari) or Firefox. We might get it working for IE and Opera if time permits. But I wouldn't hold your breath.</p>
</aside>
<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>
<footer>
<p><span class="clear"><a href="mailto:[email protected]">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 <span class="smcap">FFFFALLBACK</span>!</small>
</p>
</footer>
</div>
</div>
<span class="horizon setting"></span>
<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>