Ändern Sie CSS font-face dynamisch mit JavaScript/JQuery

Ich versuche, einen Code zu entwickeln, der in der Lage ist, die Schriftart eines Elements dynamisch zu ändern, indem eine Schriftartdatei (TTF) lädt. Der folgende Code funktioniert in Chrome, Opera und Firefox, funktioniert aber nicht in IE, Edge und Safari.Ändern Sie CSS font-face dynamisch mit JavaScript/JQuery

<html> 
<head> 
<style> 
#my-font { 
    margin-top: 50px; 
    font-size: 20pt; 
} 
</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

<script> 
    $(function(){ 
     $("#font").change(function(){ 
      // post the font file to the php script that will move the file uploaded to the folder "fonts" 
      $.ajax({ 
       url: 'movefontfile.php', 
       type: 'POST', 
       data: new FormData($("#send")[0]), 
       processData: false, 
       contentType: false, 
      }).done(function(name){ 
       // set the font face 
       var f = new FontFace("myfont", "url(fonts/"+name+")", {}); 
       f.load().then(function (loadedFace) { 
        document.fonts.add(loadedFace); 
        var fptags = document.getElementById('my-font'); 
        fptags.style.fontFamily = "myfont, sans-serif"; 
       }); 
      });   
     }) 
    }); 
</script> 
</head> 

<body> 
    <form id="send"> 
    <input type="file" id="font" name="font"> 
    </form> 
    <p id="my-font"> 
     This is a font text 
    </p> 
</body> 

</html>

Dies ist der PHP-Code:

<?php 
$name = $_FILES['font']['name']; 
move_uploaded_file($_FILES['font']['tmp_name'], 'fonts/'.$name); 
echo $name; 
?>

mir jemand helfen könnte? Ich brauche einen Code, der in jedem gängigen Browser funktioniert. Vielen Dank.

Quelle

2016-04-07 Breno Macena

Sie müssten wahrscheinlich die Seite neu laden in diesen Browsern. –

Ich finde eine Lösung, die in Safari und Edge funktioniert, aber noch nicht funktioniert IE.

Es ist sehr hässlich, aber funktioniert:

<html> 
<head> 

<style> 
#my-font { 
    margin-top: 50px; 
    font-size: 20pt; 
} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 
    var font; 
    $(function(){ 
     $("#font").change(function(){ 
      // post the font file to the php script that will move the file uploaded to the folder "fonts" 
      $.ajax({ 
       url: 'movefontfile.php', 
       type: 'POST', 
       data: new FormData($("#send")[0]), 
       processData: false, 
       contentType: false, 
      }).done(function(data){ 
       $('link[rel=stylesheet][href="'+font+'.css"]').remove(); 
       font = data; 
       $('head').append('<link rel="stylesheet" type="text/css" href="'+data+'.css">'); 
       $('#my-font').css('font-family', 'myfont, sans-serif'); 
      });   
     }) 
    }); 
</script> 
</head> 

<body> 
    <form id="send"> 
    <input type="file" id="font" name="font"> 
    </form> 
    <p id="my-font"> 
     This is a font text 
    </p> 
</body> 

</html>

Und das PHP-Skript:

<?php 
$name = $_FILES['font']['name']; 

move_uploaded_file($_FILES['font']['tmp_name'], 'fonts/'.$name); 

$css = file_get_contents('font-face-aux.css'); 

$css = str_replace('?FONT_NAME?', $name, $css); 

$f = fopen($name.'.css', 'w'); 
fwrite($f, $css); 
fclose($f); 
echo $name; 
?>

Und die auxiliar CSS:

@font-face { 
    font-family: 'myfont'; 
    src: url('fonts/?FONT_NAME?'); 
}

Quelle

2016-04-08 14:30:20

IE und Edge unterstützen das JavaScript-Objekt FontFace nicht. Vielleicht haben Sie mehr Glück dynamisch die CSS @font-face Code zu schaffen, etwa so:

$.ajax({ 
    url: 'movefontfile.php', 
    type: 'POST', 
    data: new FormData($("#send")[0]), 
    processData: false, 
    contentType: false, 
}).done(function(data){ 
    $('<style>').text("@font-face {font-family: 'myfont'; src: url('fonts/myfont.ttf');}"); 
    var fptags = document.getElementById('my-font'); 
    fptags.style.fontFamily = "myfont, sans-serif"; 
});

Quelle

2016-04-07 23:05:44 Chris

Hallo, vielen Dank für Ihre Antwort. Ich habe das schon einmal probiert und hat nicht funktioniert. Es ändert einfach nicht die Schriftart, ich weiß nicht warum. Aber trotzdem, danke. –

@BrenoMacena Ich habe es in Edge getestet und es hat funktioniert. Mit welchem Browser hatten Sie Probleme? – Chris

Nun, ich habe es auch in Edge getestet. Und hat nicht funktioniert. Das ist wirklich seltsam. Vielleicht sind die Font-Dateien, die ich verwende. Aber mit den gleichen Dateien funktioniert in Chrome. –

Versuchen Sie, den Browser-Debugger von F12-Taste und überprüfen Sie die Schrift auf dem <p> Tag zu verwenden.

Fix es auf Konsolenfenster und aktualisieren Sie Ihren Code entsprechend.

Quelle

2016-04-08 13:39:50

Ändern Sie CSS font-face dynamisch mit JavaScript/JQuery

Antwort

Verwandte Themen