每次刷新页面时，如何为一行文本生成随机字体？答案

【问题标题】：How do I generate a random font to a line of text every time page is refreshed?每次刷新页面时，如何为一行文本生成随机字体？
【发布时间】：2014-02-18 18:50:14
【问题描述】：

每次从我的 JavaScript 列表中刷新我的页面时，我都会尝试生成一种新字体。我想要总共 4 种字体，并且我希望读取“字体”的行是实际更改的字体。每当我刷新页面时，我都无法更改字体。有什么办法可以用 JavaScript 做到这一点？以下是我尝试过的一些事情：

<script>
var fontType = [ "Arial", "Verdana", "Helvetica"];
var num;
num=Math.floor(Math.random()*3);
document.getElementById("fontfamily").src=fontType[num];
</script>

这似乎不起作用。我想知道我必须为字体调用一个 ID，但是否有“GetelementById(fontfamily)”之类的东西？这也在我的身体标签中。

var font = [];
font[0] = "Times New Roman";
font[1] = "Arial";
font[2] = "Helvetica";

这会是更好的选择吗？我怎样才能让这个随机选择？

【问题讨论】：

标签： javascript html fonts

【解决方案1】：

你想要document.getElementById("fontfamily").style.fontFamily;

当您想使用 JavaScript 设置元素的样式时，请使用 .style 然后将 css 属性驼峰化。所以font-family变成fontFamily，background-image变成backgroundImage

var fontType = [ "Arial", "Verdana", "Helvetica"];
var num;
num=Math.floor(Math.random()*3);
document.getElementById("fontfamily").style.fontFamily =fontType[num];

http://jsfiddle.net/DZnbR/

【讨论】：

【解决方案2】：

给你：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway|Roboto" rel="stylesheet">

        <style>
            .Roboto{
                font-family: 'Roboto', sans-serif;
            }
            .Open_Sans{
                font-family: 'Open Sans', sans-serif;
            }
            .Roboto{
                font-family: 'Raleway', sans-serif;
            }
        </style>
    </head>
    <body id="body">

        <script>

            var fonts = ['Roboto', 'Open_Sans', 'Raleway'];
            var rand = fonts[Math.floor(Math.random() * fonts.length)];
            console.log(rand);

            var bodyElement = document.getElementById("body");
            bodyElement.className = rand;
        </script>
    </body>
</html>

【讨论】：