css - 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>