Skip to content

Commit fe26024

Browse files
jpamentaljpamental
committed
Adding font-feature stuff
1 parent 6a874c3 commit fe26024

11 files changed

+1026
-0
lines changed

‎font-features/font-kerning.html‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Font feature example - kerning</title>
7+
8+
<style>
9+
@font-face{
10+
font-family: 'Plex Serif';
11+
font-weight: 400;
12+
font-style: normal;
13+
font-stretch: normal;
14+
src: url('fonts/plex/IBMPlexSerif-Regular.woff') format('woff'),
15+
url('fonts/plex/IBMPlexSerif-Regular.woff2') format('woff2');
16+
}
17+
18+
19+
html {
20+
box-sizing: border-box;
21+
font-size: 100%;
22+
}
23+
24+
*,
25+
*::before,
26+
*::after {
27+
box-sizing: inherit;
28+
}
29+
30+
body {
31+
font: 1.2em "Plex Serif", "Times New Roman", serif;
32+
margin: 20px;
33+
padding: 0;
34+
}
35+
36+
.wrapper {
37+
width: 100%;
38+
display: grid;
39+
grid-template-columns: 1fr;
40+
grid-gap: 1rem;
41+
}
42+
43+
@media screen and (min-width: 35rem) {
44+
.wrapper {
45+
grid-template-columns: 1fr 1fr;
46+
}
47+
}
48+
49+
@media screen and (min-width: 52rem) {
50+
.wrapper {
51+
grid-template-columns: 1fr 1fr;
52+
}
53+
}
54+
55+
textarea {
56+
font-family: monospace;
57+
display: block;
58+
margin-bottom: 10px;
59+
height: 160px;
60+
background-color: #F4F7F8;
61+
border: none;
62+
border-left: 6px solid #558ABB;
63+
color: #4D4E53;
64+
padding: 1rem 0;
65+
width: 100%;
66+
}
67+
68+
textarea:nth-of-type(1) {
69+
height: 130px;
70+
}
71+
72+
textarea:nth-of-type(2) {
73+
height: 100px;
74+
}
75+
76+
.playable-buttons {
77+
text-align: right;
78+
width: 100%;
79+
padding: 0.5rem 0;
80+
font-size: 100%;
81+
}
82+
83+
.section {
84+
width: 100%;
85+
border: 1px solid #4D4E53;
86+
border-radius: 2px;
87+
padding: 10px 14px 10px 10px;
88+
margin-bottom: 10px;
89+
}
90+
91+
.section input {
92+
display: block;
93+
margin: 5px;
94+
}
95+
96+
.container * {
97+
font-size: 4rem;
98+
margin: 1.5rem 0;
99+
}
100+
101+
</style>
102+
<style class="editable1">
103+
/* kerning: auto|normal|none */
104+
.container1 * {
105+
font-kerning: normal;
106+
}
107+
</style>
108+
<style class="editable2">
109+
/* 'kern' 1|0 (on or off) */
110+
.container2 * {
111+
font-feature-settings: 'kern' 1;
112+
}
113+
</style>
114+
</head>
115+
116+
<body>
117+
<div class="wrapper">
118+
<div class="demo1">
119+
<section class="section section1">
120+
<div class="container container1">
121+
<p>Puffy Pangolins</p>
122+
</div>
123+
</section>
124+
<textarea class="playable-css1">
125+
/* kerning: auto|normal|none */
126+
.container1 * {
127+
font-kerning: normal;
128+
}
129+
</textarea>
130+
<textarea id="code1" class="playable-html1">
131+
<div class="container container1">
132+
<p>Puffy Pangolins</p>
133+
</div>
134+
</textarea>
135+
</div>
136+
<div class="demo2">
137+
<section class="section section2">
138+
<div class="container container2">
139+
<p>Puffy Pangolins</p>
140+
</div>
141+
</section>
142+
<textarea class="playable-css2">
143+
/* 'kern' 1|0 (on or off) */
144+
.container2 * {
145+
font-feature-settings: 'kern' 1;
146+
}
147+
</textarea>
148+
<textarea id="code2" class="playable-html2">
149+
<div class="container container2">
150+
<p>Puffy Pangolins</p>
151+
</div>
152+
</textarea>
153+
</div>
154+
</div>
155+
<div class="playable-buttons">
156+
<input id="reset" type="button" value="Reset">
157+
</div>
158+
</body>
159+
<script>
160+
var section1 = document.querySelector('.section1');
161+
var editable1 = document.querySelector('.editable1');
162+
var textareaHTML1 = document.querySelector('.playable-html1');
163+
var textareaCSS1 = document.querySelector('.playable-css1');
164+
var section2 = document.querySelector('.section2');
165+
var editable2 = document.querySelector('.editable2');
166+
var textareaHTML2 = document.querySelector('.playable-html2');
167+
var textareaCSS2 = document.querySelector('.playable-css2');
168+
var rangeinput = document.querySelector('.controls--slider');
169+
var reset = document.getElementById('reset');
170+
var htmlCode1 = textareaHTML1.value;
171+
var cssCode1 = textareaCSS1.value;
172+
var htmlCode2 = textareaHTML2.value;
173+
var cssCode2 = textareaCSS2.value;
174+
175+
function fillCode() {
176+
editable1.innerHTML = textareaCSS1.value;
177+
section1.innerHTML = textareaHTML1.value;
178+
editable2.innerHTML = textareaCSS2.value;
179+
section2.innerHTML = textareaHTML2.value;
180+
}
181+
182+
reset.addEventListener('click', function () {
183+
textareaHTML1.value = htmlCode1;
184+
textareaCSS1.value = cssCode1;
185+
textareaHTML2.value = htmlCode2;
186+
textareaCSS2.value = cssCode2;
187+
fillCode();
188+
});
189+
190+
textareaHTML1.addEventListener('input', fillCode);
191+
textareaCSS1.addEventListener('input', fillCode);
192+
textareaHTML2.addEventListener('input', fillCode);
193+
textareaCSS2.addEventListener('input', fillCode);
194+
window.addEventListener('load', fillCode);
195+
196+
</script>
197+
198+
</html>

0 commit comments

Comments
 (0)