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

Question

I'm working on a website and I'm trying to figure out how to change the font everytime someone loads the page. The content of the text would be the same, but the font would be different everytime someone visits the website.

Is there a way to make a specific text element cycle randomly between 7-8 fonts on a webpage?

Answer 1

I did it with three fonts, but you can use seven or eight with the same idea. First, define all fonts in the 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);
}

Then make CSS variable that stores the (randomily) selected font. Make also a classname that uses the font.

/* 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);
}

And lastly add some JavaScript to randomily pick one font to use.

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);

Here is the result when I'm refreshing the site:

Answer 2

What you could do is have a list of the font-family declarations you can choose from and then at load time invoke a bit of Javascript that gets a random number and selects one of them.

The JS can then set a CSS variable, say --font-family, which is what is used in your style sheet(s).

Here's a simple example:

 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