使用JavaScript/JQuery动态更改CSS字体_Javascript_Php_Jquery_Html_Font Face

使用JavaScript/JQuery动态更改CSS字体

javascript php jquery html

使用JavaScript/JQuery动态更改CSS字体,javascript,php,jquery,html,font-face,Javascript,Php,Jquery,Html,Font Face,我正在尝试开发一个代码，可以通过使用上传的字体文件（TTF）动态更改元素的字体。下面的代码在Chrome、Opera和Firefox中运行良好，但在IE、Edge和Safari中不起作用 <html> <head> <style> #my-font { margin-top: 50px; font-size: 20pt; } </style> <script src="https://ajax.googleapis.c

我正在尝试开发一个代码，可以通过使用上传的字体文件（TTF）动态更改元素的字体。下面的代码在Chrome、Opera和Firefox中运行良好，但在IE、Edge和Safari中不起作用

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


#我的字体{
边缘顶部：50px；
字号：20pt；
}
$（函数（）{
$（“#字体”）.change（函数（）{
//将字体文件发布到php脚本，该脚本将文件上传到文件夹“fonts”中
$.ajax（{
url:'movefontfile.php'，
键入：“POST”，
数据：新表单数据（$（“#发送”）[0]），
processData:false，
contentType:false，
}).done（函数（名称）{
//设置字体
var f=新字体面（“myfont”，“url（字体/“+name+”），{}）；
f、 load（）。然后（函数（loadedFace）{
document.font.add（loadedFace）；
var fptags=document.getElementById（'my-font'）；
fptags.style.fontframy=“myfont，sans serif”；
});
});         
})
});

这是一个字体文本

这是php代码：

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

有人能帮我吗？我需要一个代码，在每一个流行的浏览器工作。谢谢。

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

$.ajax（{
url:'movefontfile.php'，
键入：“POST”，
数据：新表单数据（$（“#发送”）[0]），
processData:false，
contentType:false，
}).完成（功能（数据）{
$（''）.text（“@font-face{font-family:'myfont'；src:url（'font/myfont.ttf'）；}”）；
var fptags=document.getElementById（'my-font'）；
fptags.style.fontframy=“myfont，sans serif”；
});

按F12键并检查标签上的字体，尝试使用浏览器调试器

<p id="my-font">

在控制台窗口上修复它并相应地更新您的代码。

我找到了一个在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>

您可能需要在这些浏览器中重新加载页面。您好，非常感谢您的回复。我以前试过，但不起作用。它根本不会改变字体，我不知道为什么。但无论如何，谢谢你。@BrenoMacena我在Edge中测试了它，它成功了。哪个浏览器有问题？我也在Edge上测试过。而且不起作用。这真奇怪。可能是我正在使用的字体文件。但是对于相同的文件，它在Chrome中工作。我对代码做了一个小的修改（见上文），允许每次上传新文件时字体都会改变。以前，字体仅在第一次上载时更改。但这并不能解决我的问题。

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

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