Динамически загружать внешнюю сторону модели ресурсов CSS - PullRequest
Новая
       8

Динамически загружать внешнюю сторону модели ресурсов CSS

3 голосов
/ 23 марта 2019

Мне нужно динамически загружать внешний ресурс CSS для изменения семейства шрифтов страницы.

В моем SPA пользователь выбирает семейство шрифтов, которое он предпочитает для пользовательского интерфейса.Поэтому он копирует / вставляет семейство шрифтов из https://fonts.google.com во входной тег, и мне нужно соответствующим образом изменить свойство font-family страницы.

Для этого мне нужно загрузить внешнийресурс шрифта, такой как <link href="https://fonts.googleapis.com/css?family=<FONTFAMILYNAME>" rel="stylesheet">, а затем измените CSS, назначив font-family: 'Indie Flower', cursive; странице, что не является проблемой при использовании привязки CSS.

Как я могу сделать это со стороны модели?

ОБНОВЛЕНИЕ

Приложение разработано на основе Aurelia js, поэтому я имею в виду модель Aurelia, но (все еще на стороне клиента)

1 Ответ

2 голосов
/ 23 марта 2019

Надеюсь, это то, что вы ожидали 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...