打开 javascript 库来做与符号集相同的事情答案

【问题标题】：open javascript library to do the same thing as symbolset打开 javascript 库来做与符号集相同的事情
【发布时间】：2013-07-20 15:44:39
【问题描述】：

我正计划创建自己的符号字体以在我的网站上使用，我最初打算使用连字和 OT，但支持充其量是参差不齐的，并且对于旧浏览器不存在，尤其是 IE（我知道，大惊喜）。然后我开始仔细研究SymbolSet 的工作原理。它实际上非常聪明，虽然我可以很容易地更改几个数组变量并完成它，但 javascript 是专有的，未经许可我不能使用它。我希望能够创建我自己的符号字体（la SymbolSet），但我需要一个打开的 javascript 文件来让我这样做。是否有任何开放的 jQuery 插件或 javascript 库可以做到这一点？

【问题讨论】：

您的意思是您想要连字，您希望网站上的符号以字体呈现，或者您想要连字以使文本显示为图标，但仍可复制粘贴？
我很想直接使用连字，但 IE9 和更早的版本不支持它们，而且某些浏览器也存在问题。
忽略上面的评论，我不能再编辑了。后者。我很想直接使用连字，但 IE9 和更早版本不支持它们，并且某些浏览器也存在问题。 SymbolSet 使用 javascript 获取存储在 OTF 文件的私有 unicode 部分中的图标，因此无法处理连字的旧浏览器仍然能够匹配您用于连字的相同关键字。例如，我可能有一个电子邮件连字 (e_m_a_i_l.liga) 和一个私有 unicode 字符 (u+2709)，其中 .js 文件通过数组将“电子邮件”链接到“u+2709”。
其实symbolset还是需要@font-face，所以它只适用于IE >= 9。
Symbolset 提供 EOT 文件，因此它确实适用于旧版本的 IE。我对这个站点真正关心的是 IE9+，但 IE9 中不存在连字支持，所以我需要一个类似于 SymbolSet 的 .js 解决方案。这是最初开始的地方。有没有做同样事情的开放 js 库？

标签： javascript jquery fonts symbols opentype

【解决方案1】：

我找到了这个http://labs.adamdscott.com/ligatures/ligaturejs.html。基本上它遍历 dom，并用连字替换已知的字母组合。我已修改脚本以在可用时使用本机连字支持：

// ligature.js v1.0
// http://code.google.com/p/ligature-js/

// with modifications by sabof

var ligature = (function() {
  var testDiv = document.createElement('div'), 
      nativeLigatureSupport = testDiv.style.textRendering !== undefined;
  if (nativeLigatureSupport) {
    return function (node, extended) {
      if (!node) {
        ligature(document.body, extended);
      } else {
        node.style.textRendering = 'optimizeLegibility';
      }
    }
  }
  return function(node, extended) {
    if (!node) {
      ligature(document.body, extended);
    } else {
      if (node.nodeType == 3 && node.parentNode.nodeName != 'SCRIPT') {
        node.nodeValue = node.nodeValue
          .replace(/ffl/g, 'ﬄ')
          .replace(/ffi/g, 'ﬃ')
          .replace(/fl/g, 'ﬂ')
          .replace(/fi/g, 'ﬁ')
          .replace(/ff/g, 'ﬀ')
          .replace(/ij/g, 'ĳ')
          .replace(/IJ/g, 'Ĳ');

        if (extended) {
          node.nodeValue = node.nodeValue
            .replace(/ae/g, 'æ')
            .replace(/A[Ee]/g, 'Æ')
            .replace(/oe/g, 'œ')
            .replace(/O[Ee]/g, 'Œ')
            .replace(/ue/g, 'ᵫ')
            .replace(/st/g, 'ﬆ');
        }
      }
      if (node.childNodes) {
        for (var i=0; i < node.childNodes.length; i++) {
          ligature(node.childNodes.item(i), extended);
        }
      }
    }
  };

}());

【讨论】：