Zurück   Flashforum > Alternative Technologien > HTML und CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 22-01-2012, 12:40   #1 (permalink)
NCC 1701 D
 
Benutzerbild von speedjunkie
 
Registriert seit: Oct 2009
Ort: Metropolregion Hamburg
Beiträge: 637
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 12:42 Uhr)
speedjunkie ist offline   Mit Zitat antworten
Alt 23-01-2012, 11:59   #2 (permalink)
in the boondocks
 
Benutzerbild von shin10
 
Registriert seit: Feb 2006
Ort: Augsburg
Beiträge: 4.421
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
__________________

flintfabrik.de
shin10 ist offline   Mit Zitat antworten
Alt 24-01-2012, 01:38   #3 (permalink)
NCC 1701 D
 
Benutzerbild von speedjunkie
 
Registriert seit: Oct 2009
Ort: Metropolregion Hamburg
Beiträge: 637
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
Angehängte Grafiken
Dateityp: png test.png (103,1 KB, 8x aufgerufen)
__________________
Hack the Planet!
speedjunkie ist offline   Mit Zitat antworten
Alt 24-01-2012, 19:08   #4 (permalink)
in the boondocks
 
Benutzerbild von shin10
 
Registriert seit: Feb 2006
Ort: Augsburg
Beiträge: 4.421
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
shin10 ist offline   Mit Zitat antworten
Alt 31-01-2012, 22:53   #5 (permalink)
Neuer User
 
Benutzerbild von DanielFlasher
 
Registriert seit: Jan 2012
Ort: Wiesbaden
Beiträge: 5
Die Google-Methode nutze ich auch auf einigen Webseiten, ganz nett.
DanielFlasher ist offline   Mit Zitat antworten
Alt 03-02-2012, 12:41   #6 (permalink)
Neuer User
 
Registriert seit: Jun 2011
Beiträge: 275
google web fonts benutz doch auch @font-face oder?
arees ist offline   Mit Zitat antworten
Alt 03-02-2012, 13:29   #7 (permalink)
NCC 1701 D
 
Benutzerbild von speedjunkie
 
Registriert seit: Oct 2009
Ort: Metropolregion Hamburg
Beiträge: 637
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>
__________________
Hack the Planet!

Geändert von speedjunkie (03-02-2012 um 13:55 Uhr)
speedjunkie ist offline   Mit Zitat antworten
Antwort

Lesezeichen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks sind an
Pingbacks sind an
Refbacks sind an


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


Alle Zeitangaben in WEZ +1. Es ist jetzt 20:04 Uhr.

Domains, Webhosting & Vserver von Host Europe
Unterstützt das Flashforum!
Adobe User Group


Copyright ©1999 – 2014 Marc Thiele