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

html：

 

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

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 < text.length; 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 < arr.length; 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来自站长之家，学习分享使用。