-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
107 lines (104 loc) · 5.25 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
<!doctype html>
<html>
<head>
<title>Incremental Font Transfer Demo</title>
<script src="./ift_client.js"></script>
<script src="demo.js"></script>
<style>
h1.ur {
font-family: "Roboto", "Noto Serif SC";
}
div.ur {
font-family: "Roboto", "Noto Sans SC";
}
h1.ur.playfair {
font-family: "Playfair", "Noto Serif SC";
}
</style>
<link href="fonts.css" rel="stylesheet" />
<link href="common.css" rel="stylesheet" />
</head>
<body>
<div class="box">
<div class="jump">
<h3>Jump to:</h3>
<ul>
<li><a href="#" id="to-small-caps">Small Caps Example</a></li>
<li><a href="#" id="to-vietnamese">Vietnamese</a></li>
<li><a href="#" id="to-cyr-greek">Cyrilic + Greek</a></li>
<li><a href="#" id="to-width">Design Space Augmentation</a></li>
<li><a href="#" id="to-sim-chinese">Simplified Chinese</a></li>
<li><a href="#" id="to-lo-freq-sim-chinese">Low Frequency Simplified Chinese Codepoints</a></li>
</ul>
</div>
<main>
<div class="controls">
<input type="button" value="Previous Text Sample" id="prev" disabled="true" />
<input type="button" value="Next Text Sample" id="next"/>
<input type="button" value="Show Unicode Range" id="sample_toggle" style="visibility: hidden;" />
<br/>
<input type="checkbox" id="also_ur" name="also_ur" checked />
<label for="also_ur">Compare to unicode range.</label><br/>
</div>
<div class="text_and_metrics">
<div id="intro" class="sample_text">
<div class="type"></div>
<h1>Incremental Font Transfer Demo</h1>
<div>
<p>This demonstrates the use of the incremental font transfer (IFT) to load font data for display of a variety of scripts. IFT
works by using patches to extend a font to cover more codepoints and/or axes as they are encountered in rendered text. This
allows loading of only the parts of a font that are actually needed. This demo is using a fully static (ie. no dynamic backend)
version of IFT. IFT is currently in development with the w3c webfonts working group and an early draft of the specification
implemented by this demo can be found <a href="https://garretrieger.github.io/IFT/Overview.html">here</a>.</p>
<p>IFT is useful because fonts can be very large. For example, a CJK font can be tens of thousands of glyphs and multiple megabytes.
Incremental font transfer seeks to deliver only the data a website actually uses and thus dramatically reduce the performance
impact of web fonts. All languages are expected to benefit. See the IFT
<a href="https://www.w3.org/TR/PFE-evaluation/">Evaluation Report</a> for more information on the justification for and expected
performance impact of IFT.</p>
<p>For comparison purposes fonts are also loaded in parallel using css
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range">unicode-range</a> which splits each font
into multiple disjoint subsets. This is the approach currently utilized by Google Fonts to optimize load sizes.</p>
Instructions:
<ul>
<li><b>Disable caching (via dev console) or force refresh the page (ctrl+shift+r or cmd+shift+r) before
starting. If caching is enabled then fonts may be served from the cache which will make the bytes transferred counters
incorrect.</b></li>
<li>
Next/Previous will switch between text samples. Switching to a new sample will use IFT to load any additional
font data as needed.
</li>
<li>If "Compare to unicode range" is selected then fonts will be
loaded via the Google Fonts API (using unicode range) in parallel to
the incremental font transfer.</li>
<li>If unicode range loading is enabled you can switch the displayed text
sample between the two methods using the "Show unicode range" button.</li>
</ul>
</div>
</div>
<!-- IFT text -->
<div id="pfe_sample" class="sample_text hide">
<div class="type">Incremental Font transfer</div>
<h1 id="title_pfe" class="pfe"></h1>
<div id="paragraph_pfe" class="pfe"></div>
</div>
<!-- Unicode Range Text -->
<div id="ur_sample" class="sample_text hide">
<div class="type">Unicode range</div>
<h1 id="title_ur" class="ur"></h1>
<div id="paragraph_ur" class="ur"></div>
</div>
<div class="metrics">
<div class="metrics_inner">
<span>Incremental font transferred:</span>
<div id="pfe_bar" class="bar"></div>
<div id="ur_byte_counter">
<span>Unicode range transferred:</span>
<div id="ur_bar" class="bar"></div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>