javascript - 是否有不同的方法可以在本地或在上传的网页上控制字体粗细？

Question

我们创建了一个打字机模拟器，它根据您输入的速度控制字体粗细，它由一些 javascript、一些 jQuery 和 CSS 样式控制。这是链接。https://www.dynamik.systems/typewriter/

在我们将它上传到网站之前，我们使用程序 Brackets 对所有内容进行了编码，字体是我们创建的字体，其重量比通常的要宽得多。

但是现在，当一切都启动并运行时，它不像我们在本地编码时那样工作。没有代码被改变，字体是一样的。我们已经在 Chrome、Safari 和 Firefox 中尝试过。

这是本地加载的样子： https ://imgur.com/yNxaX8B

这就是现在的样子： https ://imgur.com/OpoYxpV

这是另一种显示代码正在运行的字体： https ://imgur.com/HKPxMlm

我们只尝试了不同类型的字体样式（otf、ttf、wow 等），因为这是我们唯一能想到的。

jquery 和 js。

  (function($) {

  let i = 0;
  let lastTime = 0;
  const $output = $("#output");
  const $content = $('#content');

$(window).on("keypress", function(event) {
  // Prevent backspace, enter and escape
  if(event.which === 13 || event.which === 8 || event.which === 27) { console.log('No output'); return; }
  // Keypress counter
  $("span2").text(i += 1 );
  // Intervall for scrollbar
  setInterval(updateScroll,5000);
  // Timer for Key llklkLatency
  let currTime = new Date();
  let ms = lastTime ? currTime - lastTime : 0;
  $output.text(ms + "ms");
  lastTime = currTime;
  // Fontweight
  var fontWeight = ms > 900 ? 100 : 900 / ms * 100;
  // Typewriter
  var key = event.key;
  $content.append('<span style="font-weight:' + fontWeight + '">' + key + '</span>');
  //Font-Weight 
  $("span3").text(fontWeight); 
});


})( jQuery );


function updateScroll(){
    var element = document.getElementById("content");
    element.scrollTop = element.scrollHeight;
}

// Timer

  const output = document.querySelector('output'); 

  let timeRead = false;

  let now = 0;
  let interval = null;

function startTimer() {

  let elapsedMil = Date.now() - now;

  let mil = (elapsedMil).toFixed(0) % 100;
  let sec = Math.floor(elapsedMil/1000) % 60;
  let min = Math.floor(elapsedMil/60000) % 60;
  let hou = Math.floor(elapsedMil/3600000) % 24;

  mil = padTime(mil);
  sec = padTime(sec);
  min = padTime(min);
  hou = padTime(hou);


  function padTime(num) {
    if (num < 10) {
      num = "0" + num;
    }
    return num;
  }

  output.textContent = hou + ":" + min + ":" + sec + ":" + mil;
}

 window.onload = function () {
  now = Date.now();
  interval = window.setInterval(startTimer, 10);
   };

var timer = new Timer();
timer.start();
timer.addEventListener('secondsUpdated', function (e) {
    $('#basicUsage').html(timer.getTimeValues().toString());
});


function myFunction() {
  document.body.style.backgroundColor = "white";
  document.getElementById("info").style.color = "black";
  document.getElementById("content").style.color = "black";
}

function myFunction2() {
  document.body.style.backgroundColor = "black";
  document.getElementById("info").style.color = "white";
  document.getElementById("content").style.color = "white";
}

function myFunction3() {
  document.body.style.backgroundColor = "#FF3700";
  document.getElementById("info").style.color = "black";
  document.getElementById("content").style.color = "black";
}

调用字体的 CSS 开头：

@font-face {
  font-family: "dynamik";
  src: url('https://www.dynamik.systems/wp-content/themes/fonts/DynamikGX.eot') format('opentype'),
       url('https://www.dynamik.systems/wp-content/themes/fonts/DynamikGX.ttf') format('truetype'),
       url('https://www.dynamik.systems/wp-content/themes/fonts/DynamikGX.woff') format('woff');
}

我们希望字体粗细与我们在本地上传时一样。

标签： javascriptjquerycss