html - HTML中是否有类似于\textsc(来自LaTeX)的标签？

Question

我在 Google 上没有发现任何类似于 LaTeX for HTML 中的 \textsc 标签的东西，所以也许我混淆了一些东西。我如何在 HTML 中表示小型大写字母？

Answer 1

您可以使用一些 CSS 在 HTML 中实现与小型大写字母 (\textsc) 相同的效果。 CSS 属性 font-variant-caps可以做你想做的事。根据链接:

The font-variant-caps CSS property controls the usage of alternate glyphs for capital letters. Scripts can have capital letter glyphs of different sizes, the normal uppercase glyphs, small capital glyphs, and petite capital glyphs.

对于您想要的，有一些适用的值:

Values

small-caps

This keyword forces the use of small capitals letters for lower case characters. It corresponds to the OpenType value smcp; if the font doesn't support them, it synthesizes the glyphs.

all-small-caps

This keyword forces the use of small capital letters for lower case characters. It corresponds to the OpenType values smcp and c2sc; if the font doesn't support them, it synthesizes the glyphs.

petite-caps

This keyword forces the use of petite capital letters for lower case characters. It corresponds to the OpenType value pcap; if the font doesn't support them, small caps glyphs are used instead.

all-petite-caps

This keyword forces the use of petite capital letters for lower case characters. It corresponds to the OpenType values pcap and c2pc; if the font doesn't support them, small caps glyphs are used instead.

这是一个片段演示:

#small-caps {
  font-variant-caps: small-caps;
}  

#all-small-caps {
  font-variant-caps: all-small-caps;
}  

#petite-caps {
  font-variant-caps: petite-caps;
}  

#all-petite-caps {
  font-variant-caps: all-petite-caps;
}  
  
  

<strong>Using <code>small-caps</code></strong>

<p id="small-caps">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<hr />

<strong>Using <code>all-small-caps</code></strong>

<p id="all-small-caps">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<hr />

<strong>Using <code>petite-caps</code></strong>

<p id="petite-caps">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<hr />

<strong>Using <code>all-petite-caps</code></strong>

<p id="all-petite-caps">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<hr />