如何渲染不同大小的字体？

Question

这个标题对你来说可能有些奇怪。请让我澄清一下。

我正在浏览http://typedetail.com/并发现左上角的徽标（ TYPE DETAIL ）的两种字体大小和标题（关于类型详情）中间是不同的。这些词中的第一个字母大于以下字母。

但是当我查看样式表时，我发现没什么特别的。使用类似<span class="first-letter">**</span>之类的东西没有具体的规则来实现这种效果。

这里发生了什么？

Answer 1

他们使用的字体已经是大写字母，然后使用大写字母使其大于普通的小写字母。

可在此处找到字体：https://www.google.com/fonts/specimen/Playfair+Display+SC

喜欢这样

p {
  font-family: 'Playfair Display SC', serif;
}

<link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC' rel='stylesheet' type='text/css'>
<p>Text Text and small again</p>

Answer 2

字体本身以大写字母显示小写和大写字母，但大写字母更高。在这种情况下，它是字体，而不是CSS样式。如果检查字符串的值，例如第一个单词是“关于”。