javascript - 如何从 JS 字符串中设置文本样式

Question

我正在使用这种由 JavaScript、HTML 和 CSS 制作的打字机效果（方法见下文），但我想更进一步。有没有办法可以更改输入的每个单词的字体？我四处寻找解决方案，但老实说，我什至不知道要搜索什么。请让我知道这是否可能。

var words = ['Design','Create','Dream', 'Inspire'],
    currentStep = 0,
    textEl = document.querySelector('.change-text'),
    oldWord = '';


setTimeout(changeWord, 2000);

function changeWord() {
  oldWord = textEl.innerHTML;
  
  // check if there is a word atm or not
  if (oldWord.length < 1) {

    if (currentStep !== words.length -1) {
          currentStep ++;
    }else {
      currentStep = 0;
    }
    addNextWord();
  } else {
    setTimeout(deleteWord, 1400);
  }
  
};

function deleteWord() {
  var WordLength = oldWord.length,
      currentWord = textEl.innerHTML,
      currentLength = currentWord.length;
  

  // The word is deleted so, start adding in the new one
  if (currentLength < 1) {
    changeWord();
    return;
  }
  
  // Remove a charachter
  textEl.innerHTML = currentWord.substring(0, currentLength - 1);
  
  setTimeout(deleteWord, 140);
}

function addNextWord() {
  var currentWord = textEl.innerHTML,
      currentLength = currentWord.length,
      nextWord = words[currentStep],
      nextWordLength = nextWord.length;
    
  
  if (currentLength === nextWordLength) {
    changeWord();
    return;
  }
  
  // add a charachter
  textEl.innerHTML = nextWord.substring(0, currentLength + 1);
    
  setTimeout(addNextWord, 240);
  
  
}

#first-section{
  z-index: 4;
  background-image: linear-gradient(to top, #205ba8 0%, #537895 100%);
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;


}

.inspire{
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 10%;
  color: #fff;
  font-size: 50px;
  font-weight: 600;
  font-family: sans-serif;
}

.change-text {
  position: absolute;
  bottom: 0;
  left: 10%;
  color: #fff;
  line-height: 500px;
  font-size: 70px;
  font-weight: 900;
  cursor: context-menu;

}

@keyframes blinking {
  0%    { opacity: 0; }
  50%   { opacity: 0; }
  51%   { opacity: 1; }
  100%  { opacity: 1; }
}
.change-text:after {
  content: '_';
  animation: blinking 1.2s infinite;
  
}

<section id="first-section">
    <h1 class="inspire" data-aos="fade-right">
      HERE TO:
    </h1>
    <div class="change-text" data-aos="fade-right">Design</div>


  </section>

标签： javascripthtmlcss

Answer 1

您可以使用对象数组作为单词。将您的自定义字体添加到每个单词。然后动态更改字体。我已经调整了计时器以在两者之间快速显示。

var words = [
  {
    word: 'Design',
    font: 'Cursive'
  },
  {
    word: 'Create',
    font: 'Serif'
  },
  {
    word: 'Dream',
    font: 'Sans-Serif'
  },
  {
    word: 'Inspire',
    font: `'Pangolin', cursive`
  }
],
    currentStep = 0,
    textEl = document.querySelector('.change-text'),
    oldWord = '';


setTimeout(changeWord, 2000);

function changeWord() {
  oldWord = textEl.innerHTML;
  
  // check if there is a word atm or not
  if (oldWord.length < 1) {

    if (currentStep !== words.length -1) {
          currentStep ++;
    }else {
      currentStep = 0;
    }
    textEl.style.fontFamily = words[currentStep].font;
    addNextWord();
  } else {
    setTimeout(deleteWord, 100);
  }
  
};

function deleteWord() {
  var WordLength = oldWord.length,
      currentWord = textEl.innerHTML,
      currentLength = currentWord.length;
  

  // The word is deleted so, start adding in the new one
  if (currentLength < 1) {
    changeWord();
    return;
  }
  
  // Remove a charachter
  textEl.innerHTML = currentWord.substring(0, currentLength - 1);
  
  setTimeout(deleteWord, 140);
}

function addNextWord() {
  var currentWord = textEl.innerHTML,
      currentLength = currentWord.length,
      nextWord = words[currentStep].word,
      nextWordLength = nextWord.length;
    
  
  if (currentLength === nextWordLength) {
    changeWord();
    return;
  }
  
  
  
  // add a charachter
  textEl.innerHTML = nextWord.substring(0, currentLength + 1);
    
  setTimeout(addNextWord, 240);
  
  
}

@import url('https://fonts.googleapis.com/css2?family=Pangolin&display=swap');

#first-section{
  z-index: 4;
  background-image: linear-gradient(to top, #205ba8 0%, #537895 100%);
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;


}

.inspire{
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 10%;
  color: #fff;
  font-size: 50px;
  font-weight: 600;
  font-family: sans-serif;
}

.change-text {
  position: absolute;
  bottom: 0;
  left: 10%;
  color: #fff;
  line-height: 500px;
  font-size: 70px;
  font-weight: 900;
  cursor: context-menu;

}

@keyframes blinking {
  0%    { opacity: 0; }
  50%   { opacity: 0; }
  51%   { opacity: 1; }
  100%  { opacity: 1; }
}
.change-text:after {
  content: '_';
  animation: blinking 1.2s infinite;
  
}

<section id="first-section">
    <h1 class="inspire" data-aos="fade-right">
      HERE TO:
    </h1>
    <div class="change-text" data-aos="fade-right"></div>


  </section>