Javascript FitText.js的非jQuery替代品？

我现在正在做一个小项目，我需要做的最后一件事就是创建一个好的响应标题

我找到了我非常喜欢的东西，也正是我所需要的。唯一的问题是这个插件使用jQuery，而我在项目中根本没有使用jQuery，我不想只使用一个小插件。您是否听说过或使用过类似的FitText.js插件，除非它不需要jQuery？

OP

jQuery压缩了约94 KB。压缩约9.7KB

简而言之，如果您包含Zepto，并将插件最后一行对jQuery的引用更改为Zepto，那么它就可以工作了。看

---

根据：

Zepto是一个用于现代浏览器的最低限度JavaScript库，具有基本上与jQuery兼容的API

因此，对于希望使用jQuery插件*而不必包含整个jQuery库的人来说，Zepto似乎是一个合理的解决方法

*虽然100%的jQuery覆盖率不是设计目标，但提供的API与jQuery对应的API相匹配

---

希望有帮助

像这样的事情应该让你开始，先彻底测试一下。实际上，您可以根据元素的偏移宽度缩放文本的大小。你可能想设置最小和最大字体大小，但我看不出有什么意义

resize函数可以是大约两行代码

<style type="text/css">
  div {
    border: 1px solid blue;
    white-space: nowrap;
    text-align: center;
  }
</style>

<script>

function resize(el, factor) {

  // Get element width
  var width = el.offsetWidth;

  // set default for factor
  if (typeof factor == 'undefined') {
    factor = 5;
  }

  // Set fontsize to new size
  el.style.fontSize = (width / factor | 0) + 'px';
}

window.onload = function() {
  function doResize() {resize(document.getElementById('d0'), 6);}
  window.onresize = doResize;
  doResize();
}

</script>

<div id="d0">Some text</div>

div{
边框：1px纯蓝色；
空白：nowrap；
文本对齐：居中；
}
函数调整大小（el，因子）{
//获取元素宽度
var宽度=el偏移网络宽度；
//设置因子的默认值
如果（类型因子==‘未定义’）{
系数=5；
}
//将fontsize设置为新大小
el.style.fontSize=（宽度/系数| 0）+“px”；
}
window.onload=函数（）{
函数doResize（）{resize（document.getElementById（'d0'），6）；}
window.onresize=doResize；
doResize（）；
}
一些文本

Jeremy Keith（@adactio）正在维护FitText的非jQuery替代方案：

---

我想这个问题现在已经解决了，不过我之前也在寻找类似的解决方案。我最终制作了我自己的Fittext插件，因为我需要能够只在特定的最小屏幕宽度以上打开它。因此，如果有人遇到同样的问题，下面是我提出的解决方案：

---

如果不是jQuery，您使用的是什么库（如果有的话）？将其添加为标记会有所帮助。有效的部分只是几行。您可以轻松删除jQuery依赖项。@KevinB目前没有。我把一切都控制在最低限度。我不需要任何东西（至少现在是这样）。谢谢，我一定会去看看。谢谢，这正是我想要的。我不明白你为什么要用它，这是非常普通的代码。它包含一个未使用的

css

函数、一个非常基本的

addEvent

函数（您的库或代码集合中应该已经有一个更好的版本）以及使用零除将最小值和最大值设置为无穷大的可疑设置。我不认为将最小值和最大值设置为+/-无穷大有什么意义，应该使用实数。您只需要一行代码来计算字体大小，因此只需编写自己的函数即可。与fittext.js（无论是否使用jQuery）相比，它应该不难做得更好。

<style type="text/css">
  div {
    border: 1px solid blue;
    white-space: nowrap;
    text-align: center;
  }
</style>

<script>

function resize(el, factor) {

  // Get element width
  var width = el.offsetWidth;

  // set default for factor
  if (typeof factor == 'undefined') {
    factor = 5;
  }

  // Set fontsize to new size
  el.style.fontSize = (width / factor | 0) + 'px';
}

window.onload = function() {
  function doResize() {resize(document.getElementById('d0'), 6);}
  window.onresize = doResize;
  doResize();
}

</script>

<div id="d0">Some text</div>