如何在JavaScript中更改文本的字体系列 [英] How to change font family of text in JavaScript
本文介绍了如何在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屋!
查看全文