css 加载js文字,css js 环形字体，字体异步加载

html：

html>

环形文字的纯js插件

html,

body {

height: 100%;

margin: 0;

overflow: hidden;

background: #EA6D39;;

font-family: 'font84';

overflow-x: hidden;

}

.emblem {

overflow-x: hidden;

position: absolute;

left: 0;

right: 0;

top: 25vh;

margin: 0 auto;

width: 50vh;

height: 50vh;

border-radius: 50%;

color: blueviolet;

text-align: center;

white-space:normal;

}

.emblem div {

position: absolute;

display: inline-block;

left: 0;

right: 0;

top: 0;

bottom: 0;

text-transform: uppercase;

font-size: 4vh;

transition: all 0.5s cubic-bezier(0, 0, 0, 1);

}

.emblem div span{

padding: 10px;

color: #FFFFFF;

}

HAPPY 牛 YEAR!

Emblem.init('.emblem');

// 如果不要引入特殊字体可以删除以下代码

async function loadFonts() {

console.time('加载加载耗时')

const font = new FontFace(

"font84",

"url('./字体.ttf')"

);

await font.load();

document.fonts.add(font);

document.body.classList.add("fonts-loaded");

console.timeEnd('加载加载耗时')

}

loadFonts()

emblem.js:

var Emblem = {

init: function(el, str) {

var element = document.querySelector(el);

var text = str ? str : element.innerHTML;

element.innerHTML = '';

var arr = []

// 旋转的角度在这里调整

for (var i = 0; i 

var rdeg = (90 / text.length)*(i) - 90;

arr.push(rdeg)

}

var min = arr[0], max = arr[arr.length - 1];

const pcdeg = (90 - max) / 2 // 偏差度修正

for (var i = 0; i 

var r = arr[i] + pcdeg

var x = (Math.PI/text.length).toFixed(0) * (i);

var y = (Math.PI/text.length).toFixed(0) * (i);

var letter = text[i];

var div = document.createElement('div');

var span = document.createElement('span');

var node = document.createTextNode(letter);

span.appendChild(node);

div.appendChild(span);

div.style.webkitTransform = 'rotateZ('+r+'deg) translate3d('+x+'px,'+y+'px,0)';

div.style.transform = 'rotateZ('+r+'deg) translate3d('+x+'px,'+y+'px,0)';

element.appendChild(div);

}

}

};

文中emblem.js来自站长之家，学习分享使用。