Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

speedjunkie · 22-01-2012, 11:40

Gibt es eine Einschränkung für das verwenden von Schriftarten?

BZW:

Ich würde gerne eine andere Schrift als Verdana oder Arial verwenden.

Gibt’s ein lib.js die das für 5+ geringstenfalls verschiedene Browser erledigt?

Hab mit google webfonts rum probiert!

**shin10** · 23-01-2012, 10:59

Hi Dani,

weiß jetzt nicht, ob das deine eigentliche Frage ist, aber wenn du mit @font-face auf eine canvas malen willst, dann musst du warten, bis die Schrift geladen ist.
Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

HTML-Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>@font-face and canvas</title>
        <link href='http://fonts.googleapis.com/css?family=Frijole' rel='stylesheet' type='text/css'>
        <style>
        p{
           font-family: 'Frijole', cursive;
        }

        canvas{
           border: 1px solid black;
        }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script>
        var x = 30,
            y = 10;
        function draw(str){
            try{
                var canvas = $('canvas')[0],
                ctx = canvas.getContext('2d');
                ctx.font = '12px Frijole';
                ctx.fillStyle = '#000';
                ctx.fillText(str, x, y += 20);
            }catch(err){
                return err;
            }
            return true;
        }
       
        $(this).ready(function(){
            $('#draw').click(function () {
                alert('draw onClick after onReady:\n' + draw('draw woohaa!'));
            });
            alert('draw onReady:\n' + draw('on ready'));
        })
        alert('draw immediately:\n' + draw('not yet'));//fails
        
        </script>
    </head>
    <body>
        <h1>canvas with @font-face</h1>
        <p>
            <button id="draw">draw</button>
            sample text
        </p>
        <canvas width="250" height="250">
           no canvas support
        </canvas>
    </body>
</html>

mfg

sx

speedjunkie · 24-01-2012, 00:38

Ja genau ich hätte nicht gedacht, dass das soooooooooooo

lange dauert.

Von gestern zu heute hat google seinen https://developers.google.com/webfon...webfont_loader verändert. Da kann man den Style kontrollieren während es lädt. Heftig ne

und hier noch:

Font.js: A Powerful Font Toolkit for JavaScript - Badass JavaScript

Schau mal die Fonts kommen von HDD und sind als Letztes da beim Einbinden ohne js Zeugs.

Dank Dir MICHI

**shin10** · 24-01-2012, 18:08

Keine Sache. Danke auch für den Link. Der ist ja mal ganz schön zeitnah - irre

Du kannst in meinem Bsp. auch mal
$(this).ready
gegen
$(window).load
austauschen. Sollte auch ausreichen, aber ich hab es nicht ausgiebig getestet.

Grüße

DanielFlasher · 31-01-2012, 21:53

Die Google-Methode nutze ich auch auf einigen Webseiten, ganz nett.

arees · 03-02-2012, 11:41

google web fonts benutz doch auch @font-face oder?

speedjunkie · 03-02-2012, 12:29

Ja genau,

nutzt Du die JS Methode?

Der IE9 mag das nicht oder zumindest nicht die Fonts, die ich mir ausgesucht habe.

Code:

<script type="text/javascript">
			
/MSIE/.test(navigator.userAgent)||(WebFontConfig={google:{families:["myFonts"]},loading:function(){trace("loading")},active:function(){trace("active");init()},inactive:function(){trace("inactive")}},function(){var a=document.createElement("script");a.src=("https:"==document.location.protocol?"https":"http")+"://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js";a.type="text/javascript";a.async="true";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)}());

</script>

22-01-2012, 11:40	#1 (permalink)
speedjunkie NCC 1701 D Registriert seit: Oct 2009 Ort: Metropolregion Hamburg Beiträge: 634	Canvas @font-face Gibt es eine Einschränkung für das verwenden von Schriftarten? BZW: Ich würde gerne eine andere Schrift als Verdana oder Arial verwenden. Gibt’s ein lib.js die das für 5+ geringstenfalls verschiedene Browser erledigt? Hab mit google webfonts rum probiert! __________________ Hack the Planet! Geändert von speedjunkie (22-01-2012 um 11:42 Uhr)

24-01-2012, 18:08	#4 (permalink)
shin10 in the boondocks Registriert seit: Feb 2006 Ort: Augsburg Beiträge: 4.048	Keine Sache. Danke auch für den Link. Der ist ja mal ganz schön zeitnah - irre Du kannst in meinem Bsp. auch mal $(this).ready gegen $(window).load austauschen. Sollte auch ausreichen, aber ich hab es nicht ausgiebig getestet. Grüße __________________ flintfabrik.de

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
<font face=""> und Einbettung mit AS3	echo5-7	ActionScript 3	1	09-02-2011 17:26
@font-face: stand der technik?	shin10	Am Rande	4	27-09-2010 00:59
Font size und face.....	kammschott	Web-Editoren	4	22-02-2006 12:11
[FriendsOfEd] - Photoshop Face To Face	marc	Bücher und Video-Trainings	0	10-01-2003 08:32
<font Face="..."	moneyman	ActionScript 1	3	13-03-2002 17:33

31-01-2012, 21:53	#5 (permalink)
DanielFlasher Neuer User Registriert seit: Jan 2012 Beiträge: 3	Die Google-Methode nutze ich auch auf einigen Webseiten, ganz nett.

03-02-2012, 11:41	#6 (permalink)
arees Neuer User Registriert seit: Jun 2011 Ort: Lüdinghausen Beiträge: 275	google web fonts benutz doch auch @font-face oder?