每次加载页面时如何更改 Web 元素的字体？

Question

我在一个网站上工作，我想弄清楚每次有人加载页面时如何更改字体。文本的内容是一样的，但是每次访问网站时字体都会不同。

有没有办法让特定的文本元素在网页上的 7-8 种字体之间随机循环？

Answer 1

我用了三种字体，但你可以用同样的想法使用七八种。首先，在 CSS:

中定义所有字体

@font-face {
    font-family: RandomFont1;
    src: url(./font1.woff);
}
@font-face {
    font-family: RandomFont2;
    src: url(./font2.woff);
}
@font-face {
    font-family: RandomFont3;
    src: url(./font3.woff);
}

然后创建 CSS 变量来存储（随机）选择的字体。还创建一个使用该字体的类名。

/* this stores the selected font */
:root {
    --randomFont: RandomFont1;
}

/* all elements that have this class will use the selected font */
.random-font {
    font-family: var(--randomFont);
}

最后添加一些 JavaScript 来随机选择一种字体来使用。

function randomInteger(min, max) {
    return Math.floor(Math.random() * (max-min+1) + min);
}

// if you have seven fonts, replace 3 in the next line with 7
var fontIndex = randomInteger(1, 3);
document.documentElement.style.setProperty("--randomFont", "RandomFont"+fontIndex);

这是我刷新网站时的结果：

Answer 2

你可以做的是有一个字体系列声明的列表，你可以从中选择，然后在加载时调用一些 Javascript 来获取一个随机数并选择其中一个。

然后 JS 可以设置一个 CSS 变量，比如 --font-family，这是您的样式 sheet(s).

中使用的变量

这是一个简单的例子：

const fontFamilies = ["Arial, Helvetica, sans-serif", "'Times New Roman', serif", "Courier, monospace" ];
const i = Math.floor(Math.random() * fontFamilies.length);
document.body.style.setProperty('--font-family', fontFamilies[i]);

body {
  font-family: var(--font-family);
}

 Some text to show change in font-family

每次加载页面时如何更改 Web 元素的字体？

How can I change the font of a web element everytime the page is loaded?

html

javascript

css

fonts

responsive-design