如何在JavaScript中更改文本的字体系列 [英] How to change font family of text in JavaScript

问题描述

这是它产生动画如手写体的JS代码，我想更改字体系列.我已经做了很多尝试来更改它，但是失败了.我添加了Google字体家族的链接，并在标题部分添加了该链接.如何更改字体系列?

Here is the JS code it results in animation like handwriting, I want to change font family. I have tried a lot to change it but failed. I have added link of font family from Google and added in a head section. How can I change font family?

<script>
    var fontsize = 72;
        if (window.screen.width > 700)
            fontSize=50;else if (window.screen.width > 1200)
                fontSize = 90;
            var vara = new Vara(
                "#container-animation",
                "https://raw.githubusercontent.com/akzhy/Vara/master/fonts/Satisfy/SatisfySL.json",
            [
            {
                text : "Laser",
                y : 150,
                fromCurrentPosition: {y:false},
                duration:6000,
            },
            {
                text : "Lorem Ipsum",
                y : 150,
                fromCurrentPosition: {y:false},
                delay:3000,
                duration:3000
            },
            {
                text : "Whole-food, quality recipes you can easily make at home",
                y : 150,
                fromCurrentPosition: {y:false},
                delay:3000,
                duration:4500
            },
            ],
            {
                strokeWidth: 2,
                fontSize:fontSize,
                color: "#fff",
                textAlign:"center"
            }
            );

        vara.ready(function(){
            var erase= true;
            vara.animationEnd(function(i, o){
                if (i=="no_erase") erase = false;
                if(erase) {
                    o.container.style.transition = "opacity 1s 1s";
                    o.container.style.opacity = 0;
                }
            });
            })
</script>

推荐答案

这里有一个带有2个参数的简单函数:

Here a simple function that takes 2 parameters:

• 元素选择标准(id，class等)作为字符串
• fontFamily字符串

所有选定的元素都会将其 font-family 设置为传递的字符串(或在未定义fontFamily字符串时，默认设置为'Arial，Helvectia，sans-serif')...

All elements selected will get their font-family set to the passed string (or default 'Arial,Helvectia,sans-serif' when fontFamily string is undefined)...

<script>
function changeFontFamily(selString,fontString) {
    var element = document.querySelectorAll(selString); // list of elements
       // if elements exists and if fontstring defined then change, otherwise add some default value; 
       element.forEach( function(e,idx) { e.style.fontFamily = (fontString) ? fontString : 'Arial,Helvetica,sans- serif'; });
    }
</script>

<!-- change font-family of classes .test1 and .test2 -->
<div onclick="changeFontFamily('.test1,.test2','monospace');">
    <div>
        <div class="test1">test 1.1</div>
        <div class="test1">test 1.2</div>
        <div class="test2">test 2.1</div>
        <div class="test2">test 2.2</div>
        <div class="test2">test 2.3</div>
    </div>
</div>

这篇关于如何在JavaScript中更改文本的字体系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！