221 lines
7.4 KiB
HTML
221 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>PPSFonts</title>
|
|
</head>
|
|
<body>
|
|
<h1>Font example</h1>
|
|
<nav>
|
|
<a href="#serif">Serif fonts</a>
|
|
<a href="#sans">Sans fonts</a>
|
|
<a href="#mono">Mono fonts</a>
|
|
</nav>
|
|
<section id="serif">
|
|
<h2 >Serif fonts</h2>
|
|
<article class="font-example" id="besley">
|
|
<h3>Besley</h3>
|
|
<p>Il n'y a de long ouvrage que celui qu'on n'ose pas commencer. Il devient cauchemar.</p>
|
|
<p class="light">Une citation de charle baudelaire</p>
|
|
<a href="https://static.ppsfleet.navy/fonts/Besley">Besley</a>
|
|
<pre>
|
|
@import url('https://static.ppsfleet.navy/fonts/Besley/style.css');
|
|
#besley {
|
|
font-family: 'Besley';
|
|
}
|
|
</pre>
|
|
</article>
|
|
<article class="font-example" id="bodoni">
|
|
<h3>Bodoni</h3>
|
|
<p>Il n'y a de long ouvrage que celui qu'on n'ose pas commencer. Il devient cauchemar.</p>
|
|
<p class="light">Une citation de charle baudelaire</p>
|
|
<a href="https://static.ppsfleet.navy/fonts/Bodoni">Bodoni</a>
|
|
<pre>
|
|
@import url('https://static.ppsfleet.navy/fonts/Bodoni/style.css');
|
|
#bodoni {
|
|
font-family: 'Bodoni';
|
|
}
|
|
</pre>
|
|
</article>
|
|
</section>
|
|
<section id="sans">
|
|
<h2>Sans fonts</h2>
|
|
<article class="font-example" id="chivo">
|
|
<h3>Chivo</h3>
|
|
<p>Il n'y a de long ouvrage que celui qu'on n'ose pas commencer. Il devient cauchemar.</p>
|
|
<p class="light">Une citation de charle baudelaire</p>
|
|
<a href="https://static.ppsfleet.navy/fonts/Chivo">Chivo</a>
|
|
<pre>
|
|
@import url('https://static.ppsfleet.navy/fonts/Chivo/style.css');
|
|
#chivo {
|
|
font-family: 'Chivo';
|
|
}
|
|
</pre>
|
|
</article>
|
|
<article class="font-example" id="Josephin_sans">
|
|
<h3>Josephin_sans</h3>
|
|
<p>Il n'y a de long ouvrage que celui qu'on n'ose pas commencer. Il devient cauchemar.</p>
|
|
<p class="light">Une citation de charle baudelaire</p>
|
|
<a href="https://static.ppsfleet.navy/fonts/Josephin_sans">Josephin_sans</a>
|
|
<pre>
|
|
@import url('https://static.ppsfleet.navy/fonts/Josephin_sans/style.css');
|
|
#Josephin_sans {
|
|
font-family: 'Josephin_sans';
|
|
}
|
|
</pre>
|
|
</article>
|
|
<article class="font-example" id="arimo">
|
|
<h3>Arimo</h3>
|
|
<p>Il n'y a de long ouvrage que celui qu'on n'ose pas commencer. Il devient cauchemar.</p>
|
|
<p class="light">Une citation de charle baudelaire</p>
|
|
<a href="https://static.ppsfleet.navy/fonts/arimo">Arimo</a>
|
|
<pre>
|
|
@import url('https://static.ppsfleet.navy/fonts/arimo/style.css');
|
|
#arimo {
|
|
font-family: 'Arimo';
|
|
}
|
|
</pre>
|
|
</article>
|
|
<article class="font-example" id="gen_light">
|
|
<h3>gen_light</h3>
|
|
<p>Il n'y a de long ouvrage que celui qu'on n'ose pas commencer. Il devient cauchemar.</p>
|
|
<p class="light">Une citation de charle baudelaire</p>
|
|
<a href="https://static.ppsfleet.navy/fonts/gen_light">gen_light</a>
|
|
<pre>
|
|
@import url('https://static.ppsfleet.navy/fonts/gen_light/style.css');
|
|
#gen_light {
|
|
font-family: 'gen_light';
|
|
}
|
|
</pre>
|
|
</article>
|
|
<article class="font-example" id="ibm_plex_sans">
|
|
<h3>IBM plex sans</h3>
|
|
<p>Il n'y a de long ouvrage que celui qu'on n'ose pas commencer. Il devient cauchemar.</p>
|
|
<p class="light">Une citation de charle baudelaire</p>
|
|
<a href="https://fonts.ppsfleet.navy/ibm_plex/Web/css/">IBM plex sans</a>
|
|
<pre>
|
|
@import url('https://fonts.ppsfleet.navy/ibm_plex/Web/css/');
|
|
#ibm_plex_sans {
|
|
font-family: 'IBM Plex Sans';
|
|
}
|
|
</pre>
|
|
</article>
|
|
<article class="font-example" id="lucymar-sans">
|
|
<h3>lucymar-sans</h3>
|
|
<p>Il n'y a de long ouvrage que celui qu'on n'ose pas commencer. Il devient cauchemar.</p>
|
|
<p class="light">Une citation de charle baudelaire</p>
|
|
<a href="https://static.ppsfleet.navy/fonts/lucymar-sans">lucymar-sans</a>
|
|
<pre>
|
|
@import url('https://static.ppsfleet.navy/fonts/lucymar-sans/style.css');
|
|
#lucymar-sans {
|
|
font-family: 'lucymar-sans';
|
|
}
|
|
</pre>
|
|
</article>
|
|
<article class="font-example" id="russisch-sans">
|
|
<h3>russisch-sans</h3>
|
|
<p>Il n'y a de long ouvrage que celui qu'on n'ose pas commencer. Il devient cauchemar.</p>
|
|
<p class="light">Une citation de charle baudelaire</p>
|
|
<a href="https://static.ppsfleet.navy/fonts/russisch-sans">russisch-sans</a>
|
|
<pre>
|
|
@import url('https://static.ppsfleet.navy/fonts/russisch-sans/style.css');
|
|
#russisch-sans {
|
|
font-family: 'russisch-sans';
|
|
}
|
|
</pre>
|
|
</article>
|
|
</section>
|
|
<section id="mono">
|
|
<h2 >Mono fonts</h2>
|
|
<article class="font-example" id="sometype_mono">
|
|
<h3>SometypeMono</h3>
|
|
<p>Il n'y a de long ouvrage que celui qu'on n'ose pas commencer. Il devient cauchemar.</p>
|
|
<p class="light">Une citation de charle baudelaire</p>
|
|
<a href="https://static.ppsfleet.navy/fonts/sometype_mono">SometypeMono</a>
|
|
<pre>
|
|
@import url('https://static.ppsfleet.navy/fonts/sometype_mono/style.css');
|
|
#sometype_mono {
|
|
font-family: 'SometypeMono';
|
|
}
|
|
</pre>
|
|
</article>
|
|
<article class="font-example" id="ibm_plex_mono">
|
|
<h3>IBM plex mono</h3>
|
|
<p>Il n'y a de long ouvrage que celui qu'on n'ose pas commencer. Il devient cauchemar.</p>
|
|
<p class="light">Une citation de charle baudelaire</p>
|
|
<a href="https://fonts.ppsfleet.navy/ibm_plex/Web/css/">IBM plex mono</a>
|
|
<pre>
|
|
@import url('https://fonts.ppsfleet.navy/ibm_plex/Web/css/');
|
|
#ibm_plex_mono {
|
|
font-family: 'IBM Plex Mono';
|
|
}
|
|
</pre>
|
|
</article>
|
|
</section>
|
|
<style>
|
|
@import url('https://static.ppsfleet.navy/fonts/Chivo/style.css');
|
|
@import url('https://static.ppsfleet.navy/fonts/Josephin_sans/style.css');
|
|
@import url('https://static.ppsfleet.navy/fonts/arimo/style.css');
|
|
@import url('https://static.ppsfleet.navy/fonts/gen_light/style.css');
|
|
@import url('https://static.ppsfleet.navy/fonts/ibm_plex/Web/css/ibm-plex-sans.css');
|
|
@import url('https://static.ppsfleet.navy/fonts/ibm_plex/Web/css/ibm-plex-mono.css');
|
|
@import url('https://static.ppsfleet.navy/fonts/lucymar-sans/style.css');
|
|
@import url('https://static.ppsfleet.navy/fonts/russisch-sans/style.css');
|
|
@import url('https://static.ppsfleet.navy/fonts/sometype_mono/style.css');
|
|
@import url('https://static.ppsfleet.navy/fonts/Besley/style.css');
|
|
@import url('https://static.ppsfleet.navy/fonts/Bodoni/style.css');
|
|
#chivo {
|
|
font-family: 'Chivo';
|
|
}
|
|
#Josephin_sans {
|
|
font-family: 'JosefinSans';
|
|
}
|
|
#arimo {
|
|
font-family: 'Arimo';
|
|
}
|
|
#gen_light {
|
|
font-family: 'Gen Light';
|
|
}
|
|
#ibm_plex_sans {
|
|
font-family: 'IBM Plex Sans';
|
|
}
|
|
#ibm_plex_mono {
|
|
font-family: 'IBM Plex Mono';
|
|
}
|
|
#lucymar-sans {
|
|
font-family: 'Lucymar Sans';
|
|
}
|
|
#russisch-sans {
|
|
font-family: 'Russisch Sans';
|
|
}
|
|
#sometype_mono {
|
|
font-family: 'SometypeMono';
|
|
}
|
|
#besley {
|
|
font-family: 'Besley';
|
|
}
|
|
#bodoni {
|
|
font-family: 'Bodoni';
|
|
}
|
|
.light {
|
|
font-weight: 300;
|
|
}
|
|
.extra-light {
|
|
font-weight: 100;
|
|
}
|
|
.bold {
|
|
font-weight: 700;
|
|
}
|
|
|
|
h2 {
|
|
border-bottom: 1px solid #000;
|
|
}
|
|
|
|
pre {
|
|
border-left: 2px solid;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
</style>
|
|
|
|
</body>
|
|
</html> |