0

Есть html-страница с кастомным шрифтом. По некоторым причинам сервер может этот шрифт не отдать. В таком случае надо перезагрузить шрифт без изменения адреса.

Я ожидал, что удаление и повторное добавления всех стилей решит проблему.
Оказалось, что в гуглохроме это не работает. Как починить?

Пример кода для тестирования (сервер на 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: Этот вопрос на английском.

5
  • Я бы в первую очередь хотел прояснить, что это за причины, почему это вдруг сервер не отдал шрифт и насколько это легитимная ситуация. Возможно, стоит не облегчать симптомы, а заниматься лечением болезни?
    – A K
    24 дек 2016 в 22:33
  • я только что у себя на компе создал директорию и подключил всякие шрифты , 3 штуки , разные и не из google font , все шрифты из локальной папки и предварительно воспользовался сервисом online : onlinefontconverter.com дабы из ttf сделать полный комплект , архив подключил к html и шрифты заработали , вот скриншот : cloud.mail.ru/public/2bcD/FvBE5bqUa , возможно у вас не подключено верно
    – user33274
    25 дек 2016 в 5:59
  • @Geyan, внимательнее. Сервер в примере первый раз намеренно отдаёт 404 вместо шрифта. А вопрос заключается в том, как в таком случае заставить Хром повторить запрос без перезагрузки страницы.
    – Qwertiy
    25 дек 2016 в 10:08
  • ассоциация: stackoverflow.com/q/41324990/4928642
    – Qwertiy
    14 мар 2017 в 16:10
  • ассоциация: stackoverflow.com/questions/41324990
    – Qwertiy
    14 мар 2017 в 16:15

1 ответ 1

0

Похоже, хром как-то запоминает содержимое тега style и при повторном появлении стиля с таким же содержимым (неважно, того же самого, или нового) не посылает запрос за шрифтами.

Чтобы устранить эту проблему, надо изменить содержимое тега style:

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.