nicht angemeldet
Chrome zeigt systemfremde Schrift in Canvas nicht an
Hallo,
über Google Web Fonts habe ich, zusätzlich zur systemeigenen Schrift Arial, eine systemfremde Schrift (hier 'Lobster') in ein Canvas-Element eingebunden.
In Firefox und Opera wird die systemfremde Schrift sowohl innerhalb der Canvas-Fläche als auch in einem Kontroll-Element <p> korrekt dargestellt.
Chrome zeigt die über eine externe Quelle eingebundene Schrift (zunächst) nur im Kontroll-Element <p>, nicht jedoch im Canvas-Element.
Ebenso verhält es sich, wenn eine systemfremde Schrift über @font-face eingebunden und auf der Canvas-Fläche angezeigt werden soll.
Nur ein Nachladen der Seite über Adresszeile / Enter-Taste bringt die systemfremde Schrift zur Anzeige. Der Reload-Button bzw. Taste F5 reichen dazu nicht.
Offenbar gibt es beim Chrome Probleme beim Laden der Schrift und / oder der Reihefolge, in der das Canvas-Element und die Schrift in den Browser geladen werden.
Alle meine Versuche, dieses Problem zu lösen (z.B. über den DOM Event-Ready-Handler von jQuery) sind leider ins Leere gelaufen.
Ein Bug im Chrome-Browser? Bin für jeden Tipp und Hinweis mehr als dankbar !
----------------------------------------------------------
----------------------------------------------------------
<!DOCTYPE html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster" />
<style type="text/css">
<!--
#wrapper
{
width:500px;
height:auto;
font-family:Lobster;
margin:40px auto auto auto;
}
p
{
font-family:Lobster;
}
-->
</style>
<script type="text/javascript">
<!--
function test()
{
ebene = document.getElementById('canvas');
if (ebene.getContext)
{
context = ebene.getContext('2d');
context.fillStyle = "rgba(220,220,220,1.0)";
context.fillRect(0,0,ebene.width,ebene.height);
context.font = "20px Lobster";
context.fillStyle = "#555555";
context.fillText("Abavus aequor incrementabiliter",30,50);
context.font = "12px Arial";
context.fillStyle = "#800000";
context.fillText("Aestimo tollo Liquidus per abhinc his piscis difficilis una oro suffoco Contraho.",30,70);
}
}
window.onload = test;
-->
</script>
</head>
<body>
<div id="wrapper">
<canvas id="canvas" width="500" height="400">Alternativer Inhalt</canvas>
<p>Abavus aequor incrementabiliter</p>
</div>
</body>
</html>
----------------------------------------------------------
----------------------------------------------------------