如何在 javascript 中成功更改标题/段落的字体？ [关闭]

Posted 2023-03-15

【中文标题】如何在 javascript 中成功更改标题/段落的字体？ [关闭]

【英文标题】：How would one successfully change the font of a header/paragraph in javascript? [closed]

【发布时间】：2022-01-22 10:18:28

【问题描述】：

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

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

这是我的代码的 sn-p：

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>

【问题讨论】：

见documentation。 "font-family: 'Rambla', sans-serif" 不是一组字体系列。 "'Rambla', sans-serif" 是。

@SebastianSimon 啊哈，哎呀。搞砸了。

【参考方案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>

【参考方案2】：

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

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

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

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

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

【讨论】：

哦，这真是太聪明了！感谢您的帮助，我一定会尝试的：D

我不明白，它实际上不起作用。但是，如果确实如此，我会选择这个。 :D

@InterConnect 当然可以，给定正确的拼写。