我需要动态加载外部CSS资源来更改页面的字体系列.
在我的SPA中,用户选择自己喜欢的UI字体系列.因此,他将字体家族从https://fonts.google.com复制/粘贴到输入标签中,我需要相应地更改页面font-family属性.
为此,我需要加载字体的外部资源,例如< link href =“ https://fonts.googleapis.com/css?family=\u0026lt;FONTFAMILYNAME\u0026gt;”. rel =“ stylesheet”>然后更改css分配的字体系列：’Indie Flower’,草书；到页面,使用css绑定不是问题.
我该如何从模型方面做到这一点？
更新
该应用程序是使用Aurelia js框架开发的,所以我的意思是Aurelia模型,但是(仍在客户端)
最佳答案
希望这就是你的期望
原文链接：https://www.f2er.com/css/530702.htmllet btn = document.getElementById("btn");
let inpt = document.getElementById("inpt");
let fontsLink = document.getElementById("fontsLink");
btn.addEventListener('click',function() {
let font = inpt.value;
font = font.trim();
font = font.replace(/ /g,'+');
let link = `
https://fonts.googleapis.com/css?family=${font}
`
fontsLink.href = link;
document.querySelector('body').style.fontFamily = `${inpt.value}`;
});* {
Box-sizing: border-Box;
font-family: inherit;
}
html {
font-size: 62.25%;
}
body {
font-family: sans-serif;
font-size: 1.6rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Hello World From Gaurav</title>
<link rel="stylesheet" href="" id="fontsLink">
</head>
<body>
<h1 id="demo" contenteditable="true">Change Text</h1>
<input id="inpt" type="" placeholder="Type Font Name">
<button id="btn">Load</button>
</body>
</html>