演示

Question

是否可以在只有一个字母类型的字体上伪造小写字母，即全部大写字母？

这是Stack Overflow上的一句话。

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

这是堆叠溢出的句子。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

font-variant: small-caps中的句子案例。 titleCase()函数与s中包含的字母完美匹配。

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

关于OP的前4条评论是正确的。我想重申@ Pete的评论：

css只能定位一个句子中的第一个字母或单词，除此之外你需要额外的html，否则css会怎么知道你想要第一个字母然后是堆栈的s和溢出的？

因此，您将获得各种类型的答案，每个成功的答案都会以某种形式进行标记。使用JavaScript，您可以使用白名单/词典确定范围，但覆盖任何专有名词范围都非常有限。使用Python，Java，C / C ++等语言可以实现这种程度的功能。

演示

var main = document.body; var text = main.textContent; titleCase(text); main.style.fontVariant = 'smallCaps'; function titleCase(str) { return str.replace(/\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); }); }

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

THIS IS A SENTENCE ON STACK OVERFLOW

使用CSS的全大写字体虚假资本化？

2 个答案:

演示