logo标签列表

如何在Google Chrome中强制重新加载字体

javascripthtmlcssgoogle-chromefonts
3
有一个使用自定义字体的html页面。由于某些原因，服务器有时无法提供字体。在这种情况下，我需要使用相同的url重新加载字体。
我原本以为，先移除页面上的所有样式，然后再将它们添加回来会有所帮助。但这种方法在Google Chrome浏览器中不起作用。有没有一种方法可以修复这个问题呢？希望是一种不需要重新加载页面的方法。
以下是用于测试的代码示例（使用nodejs作为服务器）：https://cloud.mail.ru/public/JeBp/hcaRZgGSC 
<!doctype html>

<title>Font test</title>

<script>document.cookie = 'send-the-font=0'</script>

<style>
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  src: url(ArefRuqaa-Regular.ttf);
}

body {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  color: blue;
}
</style>

<p>Just some text</p>

<button id="retry">Retry</button>

<script>
document.getElementById('retry').addEventListener('click', function () {
  document.cookie = 'send-the-font=1';

  var style = document.querySelectorAll('style');

  for (var q=0; q<style.length; ++q) {
    style[q].remove();
  }

  setTimeout(function () {
    for (var q=0; q<style.length; ++q) {
      document.head.appendChild(style[q]);
    }
  }, 1000);
}); 
</script>


var http = require('http');
var fs = require('fs');

http.createServer(function (request, response) {
  var file = decodeURIComponent(request.url.substr(1));
  var headers = {};

  console.log(file);

  switch(file) {
    case "":
    case "index.html":
      file = "index.html";
      headers['Content-Type'] = 'text/html; charset=UTF-8';
      break;

    case "favicon.ico":
      headers['Content-Type'] = 'image/x-icon';
      break;

    case "ArefRuqaa-Regular.ttf":
      headers['Content-Type'] = 'font/opentype';

      if (request.headers.cookie && request.headers.cookie.indexOf('send-the-font=1') !== -1) {
        console.log('  allowed');
        break;
      }

      /* Falls through */

    default:
      console.log('  404');
      response.writeHead(404, { 'Content-Type': 'text/plain' });
      response.end('Not found!');
      return;
  }

  fs.stat(file, function (error, data) {
    if (error) {
      console.log(error);
      response.writeHead(500, { 'Content-Type': 'text/plain' });
      response.end('An error occured while loading file information :(');
    } else if (!data.isFile()) {
      response.writeHead(403, { 'Content-Type': 'text/plain' });
      response.end('Not a file');
    } else {
      headers['Content-length'] = data.size;
      response.writeHead(200, headers);
      fs.createReadStream(file).pipe(response);
    }
  });
}).listen(8081);

PS: Same question in Russian.

你尝试过使用<link>元素在文档中加载CSS吗？ - guest271314
@guest271314，webpack使用style而不是link，所以我没有检查link会发生什么。 - Qwertiy
1个回答
0

看起来Chrome对样式使用了一些缓存，如果再次添加相同内容的样式（无论是相同的样式标签还是其他标签），它不会请求字体。

可以通过更新样式内容来解决这个问题：

document.getElementById('retry').addEventListener('click', function () {
  document.cookie = 'send-the-font=1';

  var style = document.querySelectorAll('style');

  for (var q=0; q<style.length; ++q) {
    style[q].innerHTML += " ";
  }
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接