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

Question

我正在尝试开发一种能够通过使用上传的字体文件 (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>

这是 php 代码：

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

有人可以帮助我吗？我需要一个适用于所有流行浏览器的代码。谢谢

Answer 1

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

Answer 2

尝试按 F12 键使用浏览器调试器并检查

标签上的字体。

<p id="my-font">

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

Answer 3

我找到了一个适用于 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;
?>

和辅助CSS：

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

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

Change CSS font-face dynamically with JavaScript/JQuery

html

javascript

php

jquery

font-face