New approach to font loading

This commit is contained in:
Sebastian 2017-06-25 00:58:44 +02:00
parent 213f306b43
commit ba244ff1c5
6 changed files with 6357 additions and 62 deletions

Binary file not shown.

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

11
css/font/font.css Normal file
View File

@ -0,0 +1,11 @@
@font-face {
font-family: 'DejaVu Sans Book';
src: url('DejaVuSans-webfont.eot');
src: url('DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
url('DejaVuSans-webfont.woff') format('woff'),
url('DejaVuSans-webfont.ttf') format('truetype'),
url('DejaVuSans-webfont.svg#dejavu_sansbook') format('svg');
font-weight: normal;
font-style: normal;
}

View File

@ -4,6 +4,7 @@
<meta charset="utf-8">
<title>#fedidwgugl Generator</title>
<link rel="stylesheet" href="css/font/font.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/milligram.min.css">
@ -16,10 +17,13 @@
background-color: #282727;
border-color: #282727;
}
.invisible-font-loader {
font-family: 'DejaVu Sans Book';
}
</style>
</head>
<body>
<div style="font-family: Dejavu Sans Book;"> </div>
<br/>
<br/>
<div class="row">
@ -42,14 +46,15 @@
<div class="row">
<div class="column column-33 column-offset-33">
<small>
Der Betrieber dieses Generators distanziert sich ausdrücklich von der
Der Betreiber dieses Generators distanziert sich ausdrücklich von der
Partei CDU, deren politischen Inhalten und ihrer miserablen PR-Abteilung.
Der Gebrauch dieses Generators zu Wahlkampfzwecken
(unabhängig von der Partei) ist nicht gestattet.
</small>
</div>
</div>
</div>
<div class="invisible-font-loader">&nbsp;</div>
<script type="text/javascript">
(function() {
@ -73,7 +78,7 @@
slogan = sloganField.placeholder;
}
ctx.font = 'bold ' + textHeight + 'px Dejavu Sans Book';
ctx.font = 'bold ' + textHeight + 'px DejaVu Sans Book';
ctx.textBaseline = 'middle';
var lines = slogan.split('\n');
@ -114,8 +119,6 @@
background.addEventListener('load', function() {
var DejavuSansBook = new FontFace('Dejavu Sans Book', 'url(DejaVuSans-webfont.woff)');
DejavuSansBook.load().then(function() {
canvas.width = background.width;
canvas.height = background.height;
@ -125,7 +128,6 @@
saveButton.addEventListener('click', saveCanvas, false);
redraw();
});
}, false);
background.src = 'background.png'