-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (103 loc) · 6.54 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
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<title>"In die busillis" - A font derived from "Tudor Black" (1878)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@font-face {
font-family:"test"; font-weight: 200 700;
src:url("/Pass-A38/font/Pass_A38.woff2") format("woff2-variations");
}
@font-face {
font-family:"test2"; font-style: normal;
src:url("font/In die busillis.woff2") format("woff2");
}
body { font-family:"test", sans-serif; font-size:16pt;margin:0;padding:0; background: #f3f1ea }
div { margin:0; padding:0; }
a { color: #06c }
header { width: 100%; margin:0; padding:0 }
header > div { width:100%; color: #fff }
header > div.info { background: #5a5351; }
header > div.titolo { background: #918583; }
header > div > div { width: 1180px; margin: 0px auto; padding:0 }
header div div p { margin:0;padding:5px 10px; font-size: 14pt }
header div div h1 { margin:0;padding:20px 10px; font-size: 30px; font-weight: 400; color: #fff }
section { width: 1180px; margin:60px auto 60px; padding:0 }
article { width: 890px; margin: 0 0 0 290px; padding:0 }
article p { margin: 5px 10px; padding:0; color: #332925 }
article p.nota { font-size: 14pt; color: #444 }
article p.nota a.refn { font-weight: 600; }
h2 { margin:30px 10px;padding:0; font-size: 40px; font-weight: 400; color: #800 }
h3 { margin:20px 10px;padding:0; font-size: 32px; font-weight: 400; color: #800 }
h4 { margin:20px 10px;padding:0; font-size: 24px; font-weight: 400; color: #800 }
a.bia { color: #fff }
a.ref { font-size: 60%; vertical-align: super; font-weight: 700 }
hr { border:0; border-bottom: 1px solid #666; margin: 20px; padding:0 }
.testo { color: #000; width:90%; margin: 20px 10px; border: 1px solid #888; font-family:"test2", sans-serif; font-size:48pt; background: #f3f1ea; padding: 4px; }
.testo:focus { outline: none }
footer { padding:0; margin:0; width: 100%; background: #666; color: #fff }
footer > div { padding: 40px 0; margin:0 auto; width: 1180px }
footer p { margin: 0 10px; font-size: 18px }
p.capol:first-letter { font-family: "test2", sans-serif; float:left; line-height: 1em; font-size: 5.5rem; margin-right: 0.1em; }
p.capol1:first-letter { color: #06c; font-feature-settings: 'ss01' }
p.capol2:first-letter { color: #666; font-feature-settings: 'ss02' }
p.capol3 .cap { color: #918583; font-family: "test2", sans-serif; font-feature-settings: 'ss03'; float: left; line-height: 1em; font-size: 5.5rem; margin-right: 0.1em; }
p.capol3 .cap span { color: #800 }
div.side {width: 249px; margin: 30px 0 0; padding:10px 10px 5px; float:left; border-right:1px solid #555; color: #666 }
p.vss { font-family: "test2"; font-size: 100px; margin-top: 20px }
p.vss01 { font-feature-settings: 'ss01'; }
p.vss02 { font-feature-settings: 'ss02'; }
p.vss03 { font-feature-settings: 'ss03'; color: #800 }
p.vss03 span { color: #918583 }
.evid { color: #000; background: #e9e5d8 }
@media only screen and (max-width: 1200px) {
header > div > div { width: 100%; }
section { width: 100% }
article { width: 100%; margin: 0; }
footer > div { width: 100% }
div.side {display:none }
}
</style>
<body>
<header>
<div class="info">
<div>
<p><a href="https://github.com/m-casanova/In-die-busillis" class="bia">← Github</a></p>
</div>
</div>
<div class="titolo">
<div>
<h1>In die busillis</h1>
</div>
</div>
</header>
<section>
<div class="side">
<p>Una breve descrizione del font derivato da "Tudor Black"</p>
</div>
<article>
<h2>Un font semplice</h2>
<p>È possibile testare il font.</p>
<textarea rows="5" class="testo">Inserire un testo di prova ÀÈÉÌÒÙàèéìòù"</textarea>
<h3>Descrizione</h3>
<p>Il font "In die busillis" è stato realizzato partendo da scansioni di "<a href="https://fontsinuse.com/typefaces/40819/tudor-black" target="_blank">Tudor Black</a>", disegnato nel 1878 da E.P. Prince e F. Tarrant per Miller & Richard.</p>
<p>Il font ha un numero limitato di caratteri ed è pensato prevalentemente per titoli. Non è considerato il corsivo.</p>
<h3 id="capol1">Capolettera ss01</h3>
<p class="capol capol1">Una caratteristica presente nel font è quella di poter mostrare un capolettera per i paragrafi.
Nel foglio di stile a <span class="evid">:first-letter</span> del paragrafo si applica uno stile che determina lo spostamento come elemento su più righe (<span class="evid">float:left</span>), la modifica delle dimensioni (<span class="evid">font-size: 5.5rem</span>), l'inserimento di un margine a destra per separarlo leggermente dal testo (<span class="evid">margin-right: 0.1em</span>), il cambio di colore (<span class="evid">color: #06c</span>) e la variante della lettera con cornice (<span class="evid">font-feature-settings: 'ss01'</span>).</p>
<p>La variante con cornice si può utilizzare anche in LibreOffice ('In die busillis:ss01').</p>
<p class="vss vss01">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
<h3 id="capol2">Capolettera ss02</h3>
<p class="capol capol2">Nel font è presente anche un secondo capolettera ottocentesco più elaborato, della Schriftgießerei Flinsch, <a href="https://archive.org/details/schriftenatlasei00petz/page/n159/mode/2up" target="_blank">riprodotto in <i>Schriften Atlas</i> (1894)</a> di L. Petzendorfer. Può essere utilizzato in modo similare a quello del capolettera precedente; è accessibile tramite caratteristica 'ss02' (<span class="evid">font-feature-settings: 'ss02'</span>).</p>
<p class="vss vss02">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
<h3 id="capol3">Capolettera ss03</h3>
<p class="capol3"><span class="cap">l<span>L</span></span>o stesso disegno di capolettera ottocentesco è disponibile anche separato in due strati distinti che possono essere colorati in modo diverso con qualche accorgimento nel foglio di stile; è necessario ripetere la lettera desiderata prima in minuscolo (per lo sfondo) e poi in maiuscolo (per la lettera effettiva), come mostrato in questo paragrafo. È accessibile tramite caratteristica 'ss03' (<span class="evid">font-feature-settings: 'ss03'</span>).</p>
<p class="vss vss03"><span>a</span>A <span>b</span>B <span>c</span>C <span>d</span>D <span>e</span>E <span>f</span>F <span>g</span>G <span>h</span>H <span>i</span>I <span>j</span>J <span>k</span>K <span>l</span>L <span>m</span>M <span>n</span>N <span>o</span>O <span>p</span>P <span>q</span>Q <span>r</span>R <span>s</span>S <span>t</span>T <span>u</span>U <span>v</span>V <span>w</span>W <span>x</span>X <span>y</span>Y <span>z</span>Z</p>
</article>
</section>
<footer>
<div>
<p>© 2023-2024 Michele Casanova
</div>
</footer>
<body>
</html>