css - 使用 CSS 对全大写字体进行假大写？

Question

是否可以在只有一种字母类型(全大写)的字体上伪造小写字母？

This is a sentence on Stack Overflow.

应用字体时看起来像这样:

THIS IS A SENTENCE ON STACK OVERFLOW.

我希望大写字母的字体稍大一些，如下例所示。但没有额外的 HTML 标记。

body {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

span {
  font-size: 1.4em;
}

<span>T</span>HIS IS A SENTENCE ON <span>S</span>TACK <span>O</span>VERFLOW

Answer 1

我认为实现此目标的最佳方法是使用 JavaScript(这样您就可以保持标记动态)。您需要的 JS 部分是这样的(请记住将 .small-caps 类添加到您的文本元素中):

function smallCaps() {
  var elements = document.querySelectorAll('.small-caps')

  Array.prototype.forEach.call(elements, function(e) {
    var text = e.innerHTML.toUpperCase()
    e.innerHTML = text.replace(/\b([A-Za-z0-9])/g, '<span class="caps">$1</span>')
  })
}

还要记得为 .caps 类添加样式:

.caps {
  font-size: 1.4em;
}

在 fiddle 中查看它的运行情况或以下:

smallCaps()

// This is what you need:
function smallCaps() {
  var elements = document.querySelectorAll('.small-caps')

  Array.prototype.forEach.call(elements, function(e) {
    var text = e.innerHTML.toUpperCase()
    e.innerHTML = text.replace(/\b([A-Za-z0-9])/g, '<span class="caps">$1</span>')
  })
}

.caps {
  font-size: 1.4em; 
}

<h1 class="small-caps">HELLO WORLD</h1>
<h2 class="small-caps">Nifty FOOBAR title</h2>