0

我使用 html、css 和 GSAP tweenies 制作了一个 svg 动画横幅。一切都很好，直到计数器开始使用简单的 innerHTML 属性进行计数。横幅中的所有文本都应该是 Roboto，除了这个元素被默认的 Times New Roman 替换。这仅在 Windows 浏览器中发生：Edge 和 IE10，所有其他供应商的浏览器都按应有的方式呈现它。

计数器的 50% 阶段

计数器的 70% 阶段

元素过渡到将混合到复制文本中的位置

您可以在最后一张图片中看到 70% 的人非常出色

CSS部分： 

    .perc-counter {
>       position: absolute;
>       color: rgb(32, 33, 36);
>       font-family: Roboto-Regular;
>       font-size: 2.5em;
>       top: 185px;
>       text-align: right;
>       right: 138px;
>       opacity: 0;
>     }

.percentage {
  position: absolute;
  color: rgb(32, 33, 36);
  font-family: Roboto-Regular;
  font-size: 2.5em;
  top: 185px;
  text-align: left;
  left: 162px;
  opacity: 0;
}

html部分：

<div class="perc-counter" id="perc-counter">0</div>
<div class="percentage" id="percent">%</div>

js部分：

var percCounter = document.getElementById("perc-counter");
var percent = document.getElementById("percent");

.to(counter, 1.2, {
          val: newVal,
          roundProps: "val",
          onUpdate: function() {
            percCounter.innerHTML = counter.val
          })

编辑：指定此问题仅在 Windows 浏览器中发生（最初的问题令人困惑）

4

1 回答 1

0

也许你可以试试 IE：

<link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,greek,greek-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
于 2018-05-17T16:06:25.170 回答