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

【问题标题】：How to force font reload in Google Chrome如何在 Google Chrome 中强制重新加载字体
【发布时间】：2017-05-10 13:10:57
【问题描述】：

有一个带有自定义字体的 html 页面。由于某些原因，服务器有时不提供字体。在这种情况下，我需要使用 相同的 url 重新加载字体。

我希望从页面中删除所有样式，然后将它们添加回来会有所帮助。
但这种方式在谷歌浏览器中不起作用。怎么解决？
我对无需重新加载页面的方式感兴趣。

测试代码示例（使用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> 元素在document 处加载css？
@guest271314，webpack 使用style，而不是link，所以我没有检查link 会发生什么。

标签： javascript html css google-chrome fonts

【解决方案1】：

似乎 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 += " ";
  }
});

【讨论】：