如何成功更改 javascript 中 header/paragraph 的字体？

Question

祝您今天过得愉快。我正在努力使我的网站更易于访问，但我真的很喜欢这种字体。但是，对于某些人来说很难阅读。我正在制作一个按钮以将所有字体更改为更易于阅读的字体，但我在创建该代码时遇到了问题。

我已经尝试了 document.getElementById('header').style.fontFamily = "font-family: 'Rambla', sans-serif"（以及那里的所有其他 DOM 选择器），但它们要么没有正常工作，要么出错。

这是我的代码片段：

function fontChange() {
  document.getElementById('header').style.fontFamily = "font-   family: 'Rambla', sans-serif"
  console.log('Works?')
}

<h1 id="header">What are the parameters for the /scheme command?</h1>
<button id="fontChange" onclick="fontChange()">
  
</button>

Answer 1

试试这个？

    <h1 id="header">What are the parameters for the /scheme command?</h1>
<button id="fontChange" onclick="fontChange()">
  
</button>
<script>
    function fontChange() {
           document.getElementById('header').style.fontFamily = "Rambla"
        console.log('Works?')
    }
</script>

Answer 2

例如，我建议您在 body 元素上切换全局 class。

document.body.classList.add('accessible-font');

然后它会给你更多的可能性和更容易的集成使用一些样式表:

.accessible-font #header {
  font-family: 'Rambla', sans-serif";
}

然后您可以根据这个全局class定义一些全局或特定的规则。它还允许您轻松地在 a11y ON / OFF 之间切换。

如何成功更改 javascript 中 header/paragraph 的字体？

How would one successfully change the font of a header/paragraph in javascript?

html

javascript

fonts