我需要在整个网站上更改字体系列，而不是一页答案

【问题标题】：I need to change font-family on whole site, instead of one page我需要在整个网站上更改字体系列，而不是一页
【发布时间】：2019-08-20 01:28:32
【问题描述】：

我正在创建一个网站，您可以在其中阅读一些文字。在一页中，文本本身。在其他 - 设置。我需要更改文本页面中的字体系列和其他选项。但是当我在那里重定向（/settings -> /text）时，所有更改都在跳过。我该怎么做才能解决它？

/* In settings.ejs */

<span id="fontFamily">
  <i id="fontCh" class="fas fa-font"></i> 
  <p id="fontWord"> Шрифт</p>
</span>

/* In read.ejs */

<pre id="text"><%= text %></pre>


fonts = [
    'Arial, Helvetica, sans-serif',
    '"Times New Roman", Times, serif',
    '"Courier New", Courier, monospace',
    'monospace',
];

var i = 0;
document.getElementById('fontCh').addEventListener('click', () => {
    i++;
    if (i == fonts.length)
        i = 0;
});

var font = fonts[i];

document.getElementById('text').style.fontFamily = font;

以上是我尝试过的。

UPD 我认为我们都没有正确理解对方。我知道如何使用外部 css 文件。但我需要知道如何使用 javaScript 更改属性 font-family 以及最重要的是什么 - 以确保在重定向到其他页面时它不会跳过我的更改（它现在做什么）

【问题讨论】：

@LeeTaylor 当然，我为元素编写了默认字体系列，问题是字体没有按要求更改，而是保持默认。
不，我的意思是一个 css 文件。这将允许您从一个位置更改整个网站的外观。
@LeeTaylor 你的意思是 document.getElementsByTagName('body')[0].style.fontFamily = font;?或者是什么？我真的没有得到你。
你好@Lee Taylor，你是说CSS的外部类型吗？我也认为这很容易。
是的，一个外部 css 文件。你正在做的不是最严格意义上的css。你到底想达到什么目的？你为什么要使用 javascript 来改变你的风格？

标签： javascript html css ejs

【解决方案1】：

您好@Vyacheslav Siniy，您可以使用外部CSS，为此您可以添加一个名为“style”的文件或任何您想要的扩展名为.css 的文件，如style.css。在 head 标签中添加该文件路径，

<head>
 <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

在该 CSS 文件中使用您的字体代码，并在您需要的每个页面中调用该文件。我认为这很容易。

【讨论】：

感谢您的回复。这是一个有点不同的问题。如果我做的一切都是正确的，我有一个元素，在点击它的时候字体系列应该改变。但是我如何在分离的 css 文件中更改它而不是通过 document.getEl... 更改它？或者其他方式。我需要的是保存 css 样式并确保当我在其他页面上重定向时它不会更改或跳过。附言我想我可能解释的不是很好，所以如果不清楚，请说出来：）
@VyacheslavSiniy ，您要更改并保存 CSS 代码文件吗？

【解决方案2】：

遵循@Sandeep 的方法。使用外部样式表。在这里练习一下：https://www.w3schools.com/css/css_howto.asp

这是样式表的链接：external stylesheet

【讨论】：

【解决方案3】：

打开网站所有页面使用的 CSS 文件，并在 CSS 中添加以下行

body, body *{
   font-family: 'Arial' !important;
}

用您的字体名称替换 Arial。这将在整个网站上实现字体系列。

【讨论】：

【解决方案4】：

您似乎只想在单击另一个元素时更改字体。

因此，您的原始代码存在问题。要点击的项目那里什么都没有，所以没有什么可以用鼠标点击的。

此外，您的 javascript 正在更新字体索引，但更改字体的代码在处理程序之外。

fonts = [
    'Arial, Helvetica, sans-serif',
    '"Times New Roman", Times, serif',
    '"Courier New", Courier, monospace',
    'monospace',
];
var i = 0;
document.getElementById('fontCh').addEventListener('click', () => 
{
  i++;
    if (i == fonts.length)
        i = 0;

  var font = fonts[i];

  document.getElementById('text').style.fontFamily = font;
});

<span id="fontFamily">
  <i id="fontCh" class="fas fa-font">Click here to change font</i> 
  <p id="fontWord"> Шрифт</p>
</span>

<pre id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</pre>

var fonts = [
    'Arial, Helvetica, sans-serif',
    '"Times New Roman", Times, serif',
    '"Courier New", Courier, monospace',
    'monospace',
];

编辑

将您的 javascript 文件更改为：

// The following code will only execute when the page has loaded and is ready.
document.addEventListener('DOMContentLoaded', function()
{
    var i = 0;
    document.getElementById('fontCh').addEventListener('click', () => 
    {
        document.getElementById('textplace').style.fontFamily = fonts[i];
        i++;
        if (i == fonts.length)
            i = 0;
    });

}, false);

您的索引文件应如下所示。您以错误的方式引用文件。

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="public/css/style.css">
        <script src="https://kit.fontawesome.com/a076d05399.js"></script><link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
    </head>
    <body>
        <div id="mySidenav" class="sidenav">
            <span id="read" onclick="onReadClick()"><i class="fas fa-book-open" aria-hidden="true"></i></span>
            <span id="upload" onclick="onUploadClick()"><i class="fas fa-upload" aria-hidden="true"></i></span>
            <span><i class="fas fa-upload" id="fontCh" aria-hidden="true"></i></span>
            <span id="cogs" onclick="onCogsClick()"><i class="fas fa-cogs" aria-hidden="true"></i></span>
        </div>

    <main id="main">
        <div id="for_reading">
            <h2>Читай <i class="fas fa-book-open" aria-hidden="true"></i></h2>
            <div id="textplace" style="font-family: Arial, Helvetica, sans-serif;">
                <p id="content"> ADD YOUR CONTENT HERE</p>
            </div>
        </div>

        <div id="for_uploading">
            <h2>Загрузи <i class="fas fa-upload" aria-hidden="true"></i></h2>
            <p>Загрузи, что хочешь, и читай на здоровье.</p>
            <form action="fileupload" method="POST" enctype="multipart/form-data">
                <input type="file" name="file" id="file" class="inputfile" onchange="fileAdded()">
                <label for="file">
                    <i class="fas fa-upload" aria-hidden="true"></i>
                    <span id="output">Выбери файл.</span>
                </label>
                <input type="submit" value="Upload">
            </form>
        </div>

        <div id="for_settings">

        </div>
    </main>

    <script src="public/js/javascript.js"></script>
    </body>
</html>

您还有其他一些问题。您有引用颜色（小麦/白色等）的代码和一个不起作用的文件上传器。你最好先完成一件事情，然后再进行下一件事情。

【讨论】：

我按照你说的做了，但仍然 :( 我认为这是问题 - 我在两个 ejs 文件的脚本标签中都有 js 的路径，但只能从一个 - settings.ejs 调用它。据我所知document.getElementById('text')... 只是无法访问此 ID，因为它放置在另一个“文档”中 - read.ejs。因此它不会改变任何东西。这是我的整个项目 - github.com/Siniy-Vyacheslav/Site_For_Reading。请不要抛弃我）
您的代码在另一个文件中的事实不是问题。我怀疑您的脚本代码在将 html 添加到您的页面之前正在运行。因此，您最好将您的脚本标签作为页面中的最后一件事（就在结束