如何使用 JavaScript 随机更改 Google API 字体系列

Question

我在按下按钮后更改字体时遇到问题。在字体数组中，我有一个书面函数引用的字体名称列表。当您按下按钮时，字体从默认更改为未定义。我在 CSS 文件中导入了来自 googlefonts 的字体链接，但我不知道如何连接它们。 字体更改按钮不起作用。

const sizeUp = document.querySelector('.sizeUp')
const sizeDown = document.querySelector('.sizeDown')
const colorBtn = document.querySelector('.color')
const fontBtn = document.querySelector('.font')
const p = document.querySelector('p')

let fontSize = 36

const increase = () => {
    if(fontSize>200) return
    fontSize += 5    
    p.style.fontSize = fontSize + 'px'   
}



const decrease = () => {
    if(fontSize<=21) return
    fontSize -= 5
    p.style.fontSize = fontSize + 'px'
}

const colorChanger = () => {
    const r = Math.floor(Math.random() * 255)
    const g = Math.floor(Math.random() * 255)
    const b = Math.floor(Math.random() * 255)
    
    p.style.color = `rgb(${r},${g},${b})`
};

const fonts = [
    "baloo-bhaina",
    "josefin-slab",
    "arvo",
    "lato",
    "volkhov",
    "abril-fatface",
    "ubuntu",
    "roboto",
    "droid-sans-mono",
    "anton",
];

const fontCharger = (fonts) => {
    const number = fonts[Math.floor(Math.random() * fonts.length)];
    p.style.fontFamily = fonts[number]
}


sizeUp.addEventListener('click', increase)
sizeDown.addEventListener('click', decrease)
colorBtn.addEventListener('click', colorChanger)
fontBtn.addEventListener('click', fontCharger)

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Anton|Arvo|Baloo+Bhaina|Droid+Sans+Mono|Josefin+Slab|Lato|Roboto|Ubuntu|Volkhov');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  font-family: 'Montserrat', sans-serif;
  color: rgb(255, 255, 255);
  background-color: rgba(82, 82, 82);
}

div {
  padding: 50px;
}

p {
  font-size: 36px;
}

<script src="https://kit.fontawesome.com/072211b0fb.js" crossorigin="anonymous"></script>

<div class="buttons">
  <button class="sizeUp">+</button>
  <button class="sizeDown">-</button>
  <button class="color">color</button>
  <button class="font">font</button>
</div>
<div class="text">
  <p>Lorem ipsum dolor sit amet.</p>
</div>

字体更改按钮不起作用。

Answer 1

您的脚本有几个错误。

1. 您没有将字体数组常量/变量传递给 fontcharger 函数
2. 您需要计算一个随机数并将其用作索引以从字体数组中选择此项

const fontCharger = () => {
    let number = Math.floor(Math.random() * fonts.length);
    p.style.fontFamily = fonts[number]
}

3. 字体系列名称需要与 google fonts API 中使用的相同

   @font-face

   规则：最重要的是，这些名称是在混合大小写（包括空格）中指定的。所以改变例如“abril-fatface”到“Abril Fatface”，

const sizeUp = document.querySelector('.sizeUp')
const sizeDown = document.querySelector('.sizeDown')
const colorBtn = document.querySelector('.color')
const fontBtn = document.querySelector('.font')
const p = document.querySelector('p')

let fontSize = 36

const increase = () => {
  if (fontSize > 200) return
  fontSize += 5
  p.style.fontSize = fontSize + 'px'
}

const decrease = () => {
  if (fontSize <= 21) return
  fontSize -= 5
  p.style.fontSize = fontSize + 'px'
}

const colorChanger = () => {
  const r = Math.floor(Math.random() * 255)
  const g = Math.floor(Math.random() * 255)
  const b = Math.floor(Math.random() * 255)

  p.style.color = `rgb(${r},${g},${b})`
};

const fonts = [
  "Arvo",
  "Lato",
  "Volkhov",
  "Abril Fatface",
  "Ubuntu",
  "Roboto",
  "Droid Sans Mono",
  "Anton"
];

const fontCharger = () => {
  let number = Math.floor(Math.random() * fonts.length);
  console.log(number, fonts[number])
  p.style.fontFamily = fonts[number]
}

sizeUp.addEventListener('click', increase)
sizeDown.addEventListener('click', decrease)
colorBtn.addEventListener('click', colorChanger)
fontBtn.addEventListener('click', fontCharger)

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Anton|Arvo|Baloo+Bhaina|Droid+Sans+Mono|Josefin+Slab|Lato|Roboto|Ubuntu|Volkhov');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  font-family: 'Montserrat', sans-serif;
}

div {
  padding: 50px;
}

p {
  font-size: 36px;
}

<script src="https://kit.fontawesome.com/072211b0fb.js" crossorigin="anonymous"></script>

<div class="buttons">
  <button class="sizeUp">+</button>
  <button class="sizeDown">-</button>
  <button class="color">color</button>
  <button class="font">font</button>
</div>
<div class="text">
  <p>Lorem ipsum dolor sit amet.</p>
</div>