Image placeholder

Fitty – 自动调整文本大小以适应其父容器的 JavaScript 库

Image placeholder
F2EX 2017-09-12

Fitty 是一个原生 JavaScript 库,压缩后只有 1Kb 。它可以自动调整文本大小以适应其固定宽度的父容器,适用于所有标准网络字体,它为字体提供最佳占用空间而不需要换行。

特色

  • 没有依赖
  • 轻松集成
  • 通过分组 DOM 读写操作实现最佳性能
  • 使用 WebFonts(参见下面的示例)
  • 最小和最大字体尺寸
  • 支持多行文本
  • 视图更改时自动更新
  • 监视元素子元素和相应的更新

安装

npm install fitty --save

或者下载 fitty.min.js ,并在你的页面上包含该脚本。

用法

要运行如下所示的 fitty ,需要传递元素引用或使用 querySelector 。为了获得最佳性能,可将它放置在 </body> 元素之前。

<div id="my-element">Hello World</div>

<script src="fitty.min.js"></script>
<script>
fitty('#my-element');
</script>
选项

以下选项可用于传递给 fitty 方法。

选项 默认值 描述
minSize 16 最小字体大小(以像素为单位)
maxSize 512 最大字体大小(以像素为单位)
multiLine true 使用最小字体大小时换行。
observeMutations MutationObserverInit 当元素内容被改变时重新缩放。当不支持 MutationObserver 时,设置为 false 。通过自定义MutationObserverInit 配置,根据你的项目优化监控。默认情况下,包含 MutationObserverInit 配置或基于浏览器支持的 false

默认 MutationObserverInit 配置:

{
  subtree: true,
  childList: true,
  characterData: true
}

你可以传递这样的自定义参数:

fitty('#my-element', {
  minSize: 12,
  maxSize: 300
});
方法/属性

fitty 函数根据它的调用方式返回一个或多个 Fitty 实例。如果传递查询选择器,它将返回一个 Fitty 实例数组,如果传递单个元素引用,将返回一个
Fitty 实例。

方法 描述
fit() 强制重新绘制当前匹配的元素
unsubscribe() 从重绘循环中删除 fitty 元素并将其恢复到其原始状态
属性 描述
element 参考相关元素
var fitties = fitty('.fit');

// get element reference of first fitty
var myFittyElement = fitties[0].element;

// force refit
fitties[0].fit();

// unsubscribe from fitty, restore to original state
fitties[0].unsubscribe();
事件

Fitty 在适配时发送名为 “fit” 的事件。

事件 描述
"fit" Fired when the element has been fitted to the parent container.

事件的 detail 属性包含一个对象,该对象包含 oldValue newValuescaleFactor

fitty 选项/方法

fitty 函数本身还有一些静态选项和方法:

选项 默认值 描述
fitty.observeWindow true 监听窗口对象上的 “resize” 和 “orientationchange” 事件,并相应地更新 fitties 。
fitty.observeWindowDelay 100 触发上述事件时,重绘抖动延迟(以毫秒为单位)。
方法 描述
fitty.fitAll() 重新调整所有适配的实例以匹配其父容器。本质上是重新绘制所有匹配项。

性能

为了获得最佳性能,你可以在样式表中添加一个 CSS 选择器,该样式表会将要重新调整大小的元素设置为 white-space:nowrap
display:inline-block。如果没有该样式,Fitty 会检测到这一点,并且会自动清理元素,导致轻微的性能损失。

假设你应用的所有元素都被分配到 fit 类名,将以下 CSS 选择器添加到样式表中:

.fit {
  display: inline-block;
  white-space: nowrap;
}

如果你只想在 JavaScript 可用时执行此操作,请将以下内容添加到网页的 <head> 中。

<script>document.documentElement.classList.add('js');</script>

并将 CSS 选择器更改为:

.js .fit {
  display: inline-block;
  white-space: nowrap;
}

效果演示


2017-09-21