我正在尝试开发一种代码，能够通过使用上传的字体文件(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;
?>
有人可以帮助我吗？我需要一个适用于所有流行浏览器的代码。谢谢。
最佳答案
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";
});
关于javascript - 使用 JavaScript/JQuery 动态更改 CSS 字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36487119/