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
newValue
和 scaleFactor
。
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