动态加载模型端的外部CSS资源

Question

动态加载模型端的外部CSS资源

3

我需要动态加载外部的css资源，以更改页面的字体族。

在我的SPA应用中，用户可以选择UI所需的字体族。因此，他将从https://fonts.google.com拷贝/粘贴字体族到输入框中，然后我需要相应地更改页面的字体族属性。

为了实现这一点，我需要加载外部字体资源，例如<link href="https://fonts.googleapis.com/css?family=<FONTFAMILYNAME>" rel="stylesheet">，然后通过CSS绑定来更改页面的字体族，这不是一个问题。

从模型方面如何实现呢？

更新

该应用使用Aurelia js框架开发，所以我指的是Aurelia模型，但仍在客户端进行。

- somejhereandthere

1

“model side”这个词汇不是很清晰，您是指在服务器端而非客户端执行此操作吗？您的问题有点含糊不清。 - eritbh

@Geo1088 我更新了问题，现在应该更清晰了。 - somejhereandthere

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gaurav Bhardwaj · Accepted Answer

Hope It is what you expected

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