JavaScript/JQueryで動的にCSS font-faceを変更

アップロードされたフォントファイル（TTF）を使用して要素のフォントを動的に変更できるコードを開発しようとしています。以下のコードはChrome、Opera、Firefoxでは正常に動作しますが、IE、Edge、Safariでは動作しません。JavaScript/JQueryで動的にCSS font-faceを変更

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

これは、PHPのコードは次のとおりです。

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

誰かが私を助けることができますか？私はすべての一般的なブラウザで動作するコードが必要です。ありがとう。

出典

2016-04-07 Breno Macena

あなたは可能性が高いページをリロードする必要がありますこれらのブラウザでは –

私はSafariとEdgeで動作するソリューションを見つけましたが、まだIEには対応していません。

それは非常に醜いですが、動作します：

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

そしてPHPスクリプト：

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

そしてAUXILIARのCSS：

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

出典

2016-04-08 14:30:20

IEとEdgeはJavaScript FontFaceオブジェクトをサポートしていません。あなたはそうのような、より良い運を動的にCSS @font-faceコードを作成する必要がある場合があります：

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

出典

2016-04-07 23:05:44 Chris

こんにちは、お返事ありがとうございました。私はこれを前に試してみたが、うまくいきませんでした。それは単にフォントを変更しない、なぜ私は知らない。しかし、とにかく、ありがとう。 –

@BrenoMacena私はEdgeでそれをテストし、うまくいきました。どのブラウザに問題がありましたか？ – Chris

さて、私もEdgeでテストしました。そして、うまくいきませんでした。これは本当に奇妙です。多分私が使用しているフォントファイルかもしれません。しかし、同じファイルでは、Chromeで動作します。 –

F12キーを押すことで、ブラウザのデバッガを使用して<P>タグにフォントをチェックしてみてください。

<p id="my-font">

これをコンソールウィンドウで修正し、それに従ってコードを更新します。

出典

2016-04-08 13:39:50

JavaScript/JQueryで動的にCSS font-faceを変更

答えて

関連する問題