当用户在浏览器中更改字体大小时，会发生什么事件？

Question

我需要在用户更改浏览器中的字体大小时得到通知。

我需要重新定位一些必须相对于文本内部锚点在一个维度上的元素。

到目前为止，我还没有找到任何东西，我有点担心它可能不可能。在这种情况下，可以使用隐藏的div和一些文本以及轮询其宽度变化的脚本来模拟它。但我希望有人有更优雅的解决方案。

编辑：

我按以下方式实施了轮询功能。它尚未在所有浏览器上进行适当的测试，但它不依赖于特定于浏览器的功能。像这样使用 $('body').bind('fontResize', function(){...})

$(function(){
  $('body').append($('<div id="theFontResizeCaptureDiv">A<br>B<br>C</div>'));
  $('#theFontResizeCaptureDiv').css({visibility: 'hidden', position: 'absolute'});

  window.setInterval(function(){
    var div = $('#theFontResizeCaptureDiv');
    var stored = parseInt(div.attr('c_height'));
    if(isNaN(stored)){ // first run
      div.attr('c_height', div.innerHeight());
    }else if(stored != div.innerHeight()){ // changed
      div.attr('c_height', div.innerHeight());
      $('body').trigger('fontResize');
    }
  }, 200);
});

- Christian

---

可能是detect browser font size的重复问题？ - user57508

这个问题比可能的重复问题更有用。即使使用了CSS + em + ex，仍然需要编写一些定位代码（我有一个DIV，必须使用绝对定位来与外部JS库一起工作，并且这个绝对位置需要考虑用户的字体大小）。 - AlexC

Answer 1

这里有一篇文章介绍了不同的方法来检测字体大小的调整：

http://www.alistapart.com/articles/fontresizing/

- Jonathon Bolster

Answer 2

你可以从这个文件中获取灵感 https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js

我已经将它整合到jQuery Terminal作为jQuery插件中，并使用带有 和css的div：

.font {
   position: absolute;
   font-size: inherit;
   top: 0;
   left: 0;
   width: 1em;
   height: 1em;
}

这样，如果父元素具有相对或绝对定位，并更改字体大小，则.font元素将更改大小并触发调整大小回调。

您可以像这样使用此插件：

var font = $('<div class="font">&nbsp;</div>').appendTo(self);

font.resizer(function() {
   // font changed size
});

其中self是您的父元素，如果您需要在body上检测此事件，则可以使用'body'。

- jcubic