Skip to content

Commit 11b138e

Browse files
committed
font-stretch example
1 parent 78cf4e4 commit 11b138e

File tree

2 files changed

+95
-0
lines changed

2 files changed

+95
-0
lines changed

variable-fonts/font-stretch.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Variable fonts: font-stretch</title>
6+
<link rel="stylesheet" href="../assets/styles.css" />
7+
<style>
8+
9+
/*
10+
This example uses the League Mono Variable font, developed by
11+
Tyler Finck (https://www.tylerfinck.com/) and used here under
12+
the terms of the SIL Open Font License, Version 1.1:
13+
http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
14+
*/
15+
16+
</style>
17+
18+
<style class="editable">
19+
20+
@font-face {
21+
src: url('fonts/LeagueMonoVariable.ttf');
22+
font-family:'LeagueMonoVariable';
23+
font-style: normal;
24+
font-stretch: 1% 500%; /* Required by Chrome */
25+
}
26+
27+
.container {
28+
font: 1.5rem 'LeagueMonoVariable', sans-serif;
29+
}
30+
31+
.condensed {
32+
font-stretch: 50%;
33+
}
34+
35+
.normal {
36+
font-stretch: 100%;
37+
}
38+
39+
.expanded {
40+
font-stretch: 200%;
41+
}
42+
</style>
43+
</head>
44+
45+
<body>
46+
<section class="preview">
47+
48+
<div class="container">
49+
<p class="condensed">an elephantine lizard</p>
50+
<p class="normal">an elephantine lizard</p>
51+
<p class="expanded">an elephantine lizard</p>
52+
</div>
53+
54+
</section>
55+
56+
<textarea class="playable playable-css" style="height: 400px;">
57+
@font-face {
58+
src: url('fonts/LeagueMonoVariable.ttf');
59+
font-family:'LeagueMonoVariable';
60+
font-style: normal;
61+
font-stretch: 1% 500%; /* Required by Chrome */
62+
}
63+
64+
.container {
65+
font: 1.5rem 'LeagueMonoVariable', sans-serif;
66+
}
67+
68+
.condensed {
69+
font-stretch: 50%;
70+
}
71+
72+
.normal {
73+
font-stretch: 100%;
74+
}
75+
76+
.expanded {
77+
font-stretch: 200%;
78+
}
79+
</textarea>
80+
81+
<textarea class="playable playable-html" style="height: 130px;">
82+
<div class="container">
83+
<p class="condensed">an elephantine lizard</p>
84+
<p class="normal">an elephantine lizard</p>
85+
<p class="expanded">an elephantine lizard</p>
86+
</div>
87+
</textarea>
88+
89+
<div class="playable-buttons">
90+
<input id="reset" type="button" value="Reset" />
91+
</div>
92+
</body>
93+
94+
<script src="../assets/playable.js"></script>
95+
</html>
71.8 KB
Binary file not shown.

0 commit comments

Comments
 (0)