JavaScript/JQuery ile CSS yazı tipi-yüzünü dinamik olarak değiştirin

Yüklenen bir yazı tipi dosyasını (TTF) kullanarak bir öğenin yazı tipini dinamik olarak değiştirebilen bir kod geliştirmeye çalışıyorum. Aşağıdaki kod, Chrome, Opera ve Firefox'ta sorunsuz çalışıyor ancak IE, Edge ve Safari'de çalışmıyor.JavaScript/JQuery ile CSS yazı tipi-yüzünü dinamik olarak değiştirin

<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>

Bu php kodudur:

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

Birisi bana yardımcı olabilir? Her popüler tarayıcıda çalışan bir koda ihtiyacım var. Teşekkürler.

kaynak

2016-04-07 Breno Macena

olasılıkla sayfayı yeniden zorunda kalacak Bu tarayıcılarda. –

Safari ve Edge'de çalışan ancak henüz IE'de çalışmayan bir çözüm buluyorum.

Çok çirkin, ama çalışır:

<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>

Ve PHP komut dosyası:

<?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; 
?>

Ve auxiliar CSS:

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

kaynak

2016-04-08 14:30:20

IE ve Edge, JavaScript FontFace nesnesinin desteğine sahip değil. Dinamik şöyle CSS @font-face kodu oluşturma daha şanslı olabilir: F12 tuşuna basarak tarayıcı debugger kullanımı ve <p> etiketi üzerinde yazı kontrol etmek

$.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"; 
});

kaynak

2016-04-07 23:05:44 Chris

Merhaba, cevabınız için çok teşekkür ederim. Bunu daha önce denedim ve işe yaramadı. Sadece yazı tipini değiştirmiyor, nedenini bilmiyorum. Ama neyse, teşekkürler. –

@BrenoMacena Edge'de test ettim ve işe yaradı. Hangi tarayıcıyla ilgili sorun yaşıyordunuz? – Chris

Eh, ben de Edge'de test ettim. Ve işe yaramadı. Bu gerçekten garip. Belki kullanıyorum yazı tipi dosyaları. Ancak aynı dosyalarda Chrome'da çalışır. –

deneyin.

<p id="my-font">

Konsol penceresine sabitleyin ve kodunuzu buna göre güncelleyin.

kaynak

2016-04-08 13:39:50

JavaScript/JQuery ile CSS yazı tipi-yüzünü dinamik olarak değiştirin

cevap

İlgili konular