如何在 Chrome 浏览器上显示字体样式？答案

【问题标题】：How to display font styles on Chrome browser?如何在 Chrome 浏览器上显示字体样式？
【发布时间】：2019-09-27 15:13:33
【问题描述】：

我遇到的问题是，以下代码将在 Microsoft Edge 中显示所需的结果，但在 Chrome 或任何其他浏览器中不会显示正确的结果。无法使用Edge 的原因是我们的程序必须在raspberry pi. 上运行

我们尝试了多种浏览器，但没有一个会显示我们的数据

<!DOCTYPE html>
<html>
<head>
<title>Sensor Data</title>
<script type="text/javascript">
function print() {
fetch("test.txt")
  .then(response => response.text())
.then(text => {
  var num = parseInt(text);
   document.getElementById("myText").innerHTML = num;
  if(num>250){
   console.log(num);
   document.body.style.color = "green";
 }
  else
  {
  console.log(num);
  document.body.style.color = "red";
}
 })
  }
  setInterval(print, 1000);
  </script>
 </head>

 <body>

 <h1>Range: <span id="myText"></span></h1>

 </body>

 </html>

我们的结果应该以基于文本文件中的数据决定的颜色显示文本文件中的数据。比如绿色代表251及以上，红色代表250及以下。

【问题讨论】：

"我们已经尝试了多种浏览器，但没有一个会显示我们的数据" 你的意思是说根本没有数据显示，或者只是没有正确的颜色显示？运行脚本时是否遇到任何错误？
在边缘会显示正确的颜色和数据，但在 chrome 和其他浏览器中会显示范围，但不会出现数据或颜色
发生这种情况时，您有一些文件内容示例吗？在不知道如何重现的情况下很难解决边缘情况

标签： javascript html google-chrome cross-browser

【解决方案1】：

你的 myFunction 永远不会被声明。不确定 fetch 会在哪里获取 stackoverflow 上的文件，所以我修改了您的代码以不使用。我认为这不会导致您的问题。这似乎在 chrome 和 firefox 上有效。这不是你想要的吗？

function print() {

  var num = 250;
  a = document.getElementById("myText1");
  b = document.getElementById("myText2");
  
  document.getElementById("myText1").innerHTML = num;
  document.getElementById("myText2").innerHTML = num;
  if(num>250){
   console.log(num);
   a.style.color = "green";
   b.style.color = "red";
  }else{
   console.log(num);
   b.style.color = "green";
   a.style.color = "red";
}
 
  }
  print();

<!DOCTYPE html>
<html>
<head>
<title>Sensor Data</title>

  
 </head>

 <body>

 <h1>Range: <span id="myText1"></span></h1>
 <h1>Range: <span id="myText2"></span></h1>

 </body>

 </html>

【讨论】：

尝试使用给定代码时，我无法在浏览器上显示任何数据。我确实删除了“MyFunction”加载功能，结果相同。
你检查过console.log吗？你有任何错误吗？如果没有，您需要创建一个 sn-p 向我们展示发生了什么
我收到一个无法获取的错误，它说 CORS 请求的 URL 方案必须是“http 或 https”