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>