目标序列为2个或更多大写字母

Question

我是杂志中的平面设计师，我们希望我们的网站更贴近我们的印刷问题。 在杂志中，我们对连续超过2个大写字母的字符串使用小型大写字母。

我知道可以使用带有OpenType字体的真正小型大写字母。我也知道你用CSS

来定位第一行或第一个字母

所以我的问题是：

是否可以在文本中定位/检测大写字母的字符串，并自动应用 font-variant 属性（无需手动应用样式或类）。

这是一个例子

Answer 1

如果你的意思是这样，当然！虽然正则表达式可以改进，因为它只匹配单词，而不是单词序列，但正则表达式仍然是我的异形，所以这是我能做的最好的：

[].forEach.call(document.querySelectorAll(".smallcapsify"), function(content) {
  var parsed = content.innerHTML.replace(/[A-Z]{2,}/g, '<span class="small-caps">$&</span>');
  content.innerHTML = parsed;
});

@import url(http://fonts.googleapis.com/css?family=Merriweather);
 span.small-caps {
  font-variant: small-caps;
  text-transform: lowercase;
}
/* Styles to make it look nicer */

body {
  font-size: 2em;
  font-family: Merriweather, serif;
  text-rendering: optimizeLegibility;
  
  /* Enable common and discretionary ligatures, according to http://blog.fontdeck.com/post/15777165734/opentype-1 and http://caniuse.com/#search=font-feature-settings */
  -webkit-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
}

<div class="smallcapsify">
  This is SOME TEXT. Here is some MORE text.
</div>