CircleType生成环形文本需两次刷新页面才能正常生效的问题

• 首先修正脚本语法错误：你现有代码中引入circletype.min.js的script标签未闭合，会导致后续内联脚本无法正常解析，修正为如下写法：

<script type="text/javascript" src="assets/js/circletype.min.js"></script>

• 其次处理字体加载时序问题：你遇到的首次加载排版错位、刷新后正常的问题，核心原因是CircleType初始化需要读取文本的实际宽度计算排版参数，首次加载时页面自定义字体未完成加载，库会用系统 fallback 字体的宽度计算，得到的参数和实际需求不符；第二次刷新时字体已经被浏览器缓存，计算结果正常。仅绑定window.load事件不能覆盖所有场景下的字体加载等待，建议用原生字体加载API触发初始化：

<script type="text/javascript">
// 等所有字体加载完成后初始化CircleType
document.fonts.ready.then(() => {
    const circleType = new CircleType(document.getElementById("rotated"));
    // 初始化完成后绑定滚动旋转事件
    $(window).scroll(function() {
        const offset = $(window).scrollTop() * 0.4;
        $(".circular-text").css("transform", `rotate(${offset}deg)`);
    });
});
</script>

• 可选优化：当前主流浏览器已经支持无前缀的transform属性，不需要额外写moz、webkit、o、ms等浏览器前缀，冗余代码可以直接删除，不影响兼容性。

内容的提问来源于stack exchange，提问作者user16519369